jquery用this获取不到html行内绑定事件的元素

Posted 2023-05-11

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jquery用this获取不到html行内绑定事件的元素相关的知识，希望对你有一定的参考价值。

<html>
<button type='button' onclick='test(this)' name='btn'>按钮</button>
</htm>

<js>
function test()
var name= $(this).attr('name'); //这里用this获取不到html行间绑定事件的对象
//但是如果是用addEventListener('click',test)绑定的
</js> //用this就能获取到button的name属性

//我想问一下，html行内绑定的事件，调用函数test，在test函数中this的指向谁的？

<html>
<script type="text/javascript">  //JS必须写在这个标签下，这个标签必须在HTML标签下
function test(but)   //函数必须有入参才能接收你传入的参数
                   var name= but.name;  //name属性是对象本身就有的属性，可以直接取。
   alert(name);

</script>
<button type='button' onclick='test(this)' name='btn'>按钮</button>
</html>

追问

我的意思是：为什么在行间绑定的事件，this指向的是window，而用js绑定的事件，this指向的是对象本身。（这个跟test有没有参数没关系吧，没参数也能调用this）
因为我的页面上有2种button，一种是在行间绑定的事件，一种是用addEventListener('click',test)绑定的事件，所以想让this都指向对象本身

参考技术A 因为写在function里的this,作用在全局环境中，所以是window。
而绑定了监听事件后，他作用在对象上，所以this，指代的是你监听的dom对象。

前端： jquery事件绑定及选择器使用动态变量

目标与html代码

目标：点击jq删除，获取整行tr的id，（后端部分略，传递id处理即可），页面删除该tr行

  <tr myid="{{ cls.id }}">
     ....

      <td><a onclick="rmStu(this);" class="abc" href="#">jq删除</a></td>

【方式1】由onclick触发，点击位置由this传递

动态变量由字符串拼接

<script>
    function rmStu(th) {
    var myid=$(th).parent().parent().attr(‘myid‘);
    alert(myid);
{#    $(th).parent().parent().remove();#}
{#    $("[myid=‘11‘]").remove();#}
{#    $("[myid=myid]").remove();无法定位#}
    $("[myid="+myid+"]").remove();

    }
</script>

【方式2】事件绑定。点击触发，条件为任意class="abc"时。

触发时再由$(this)获取点击位置

<script>
    $(function () {
        bindEvent();
    });
    function bindEvent() {
        $(‘.abc‘).click(function () {
            var myid=$(this).parent().parent().attr(‘myid‘);
            alert(myid);

        })
    }

</script>

附录 bootstrap modal show

<script src="/static/jquery-3.3.1.js"></script>
<script src="/static/plugin/bootstrap-3.3.7/js/bootstrap.js"></script>
<script>
    $(function () {
        abc();
    });
    function abc() {
        $(‘#showmyModal‘).click(function () {
            $(‘#myModal‘).modal(‘show‘);
        })
    }

</script>