jquery on函数详解

on函数可以做很多事情,可以绑定各种事件,可以配合事件冒泡使用,推荐使用on函数,建议不要用bind。

先看一段代码

 $(".layui-row").on("click","tr a",function(event){

          clonsole.log($(this).html(); )//等同于元素$(tr a).html();

 event.stopPropagation();
  })

一开始刚接触前端的时候对于事件冒泡不熟悉的时候,可能认为on函数就是简单的绑定事件,现在的理解是这样的

上面代码中tr a是属于绑定事件触发的元素也就是$(this)对象,简单介绍下$(this)对象的用法,当$(this)出现在jquery循环中的时候对象即是循环的对象,当出现在绑定事件中及时绑定的事件对象(还有不建议大家将事件直接写到标签上,通过传递this的方式获取this,首先看起来很乱,其次当页面变动,加载可能阻塞,我以前喜欢这样写最后被骂了才改过来的)

所以总结一些就是:.layui-row是绑定事件的地方接受事件冒泡的触发,tr a 是绑定事件触发的地方

on方法还有一个用法就是新添加的元素绑定事件,也是因为事件冒泡的作用


当页面新添加dom元素的时候,你直接用$().click()肯定是不行的因为后面添加的元素并不会有自行绑定一次,你绑定的方法是在页面加载完成后执行的也就是只执行了一次,如果你不嫌麻烦的话可以添加元素后重新单独执行一次。这个时候用on函数就特别好。

一句话: tr a  触发的事件传递到.layui-row 标签(向外传递)时就会执行该方法,有了事件冒泡才会有on函数

事件冒泡我就不多说了,底层我也不太懂,执行规则我大概明白,还有事件阻止方式可以自行百度,事件冒泡的机制必须搞懂老铁们。

猜你喜欢

转载自blog.csdn.net/qq_37891961/article/details/80168458