前端开发——jquery之事件委托和绑定

功能:

前端开发——jquery之事件委托和绑定_第1张图片
箱套点击如上按钮,触发函数,使用ajax动态从底层加载数据到template(即要显示的部分)中,然后将templat嵌入到指定id的html元素中(就是指两行之间),形成完整的代码。

问题描述:

$('.show-details-btn').on('click',function(e) {

    console.log("点击事件被触发");
});

如果直接使用以上的jquery的on函数,则该事件不会被触发。

原因:

主要原因是加载顺序引起的。
我这里使用的是freemarker的模板引擎。这里首先加载全文ftl模板,加载完成后,加载javascript,js放在了前面。
js中调用” (document).ready()"jQuery使document.readyDOM" (document).ready()”里面包含了页面初始化跟页面显示函数,这个时候已经能正常显示界面。
也就是只有在显示函数执行完成后,隐藏的template才会被加载进来,才会生成对应的dom节点。理论上我的触发函数应该在这个时候被绑定,才能成功绑定,但是

这里牵扯到两个知识点:
1.解释性语言跟编译型语言

前端开发——jquery之事件委托和绑定_第2张图片

引用地址

2.JS内部的加载顺序
简单来讲就是当加载一个技术文件
js引擎会优先解析var变量和function定义!在预解析完成后从上到下逐步进行!
所以这解释了为什么同一个js文件,函数可以先先使用在定义。
也解释了为什么我的绑定失败。因为刚加载js的时候我的触发函数就已经被解析了,而这个时候页面加载函数还没有触发,所以绑定失败。
参考链接

解决方法

核心思想:确保先加载节点,在绑定事件
1.直接在要隐藏的加载的template中写onclock触发,这样就能确保,先加载dom节点,在绑定
2.利用回调函数,在加载template的函数上进行回调,确保加载完成后在执行触发函数
3.利用jquery的事件委托和绑定。

这里我用了第三种就是事件的绑定和委托。采用的是on委托方式。
1.$(“.show-details-btn”).on(‘click’,function(e)){}

2.$(‘body’).on(‘click’,”.show-details-btn”,function(e){}

第一种是普通绑定,第二种是委托事件
要理解第二种方法,首先我们要知道事件冒泡,就是当我们点击一个element触发事件时,该事件会向上传递。

而在上图执行之后,click事件会接着向树的根方向传播,广播到父元素,然后是每级的祖先元素,只要是它的某个后代元素上的单击事件被触发,事件就会传给它————这就是事件冒泡

然后再讲我们的案例,因为绑定的是body,所以一定能绑定成功。然后2方法会实现一个动态的监听效果,即,如果有”.show-details-btn”发生单机事件,,根绝冒泡原理1,事件传递到body上,所以也能执行触发函数。这里的动态就是指即使指不管是载绑定前还是绑定后加载的element,只要为”.show-details-btn”,都能触发绑定的事件。因为绑定的是body。

参考链接1
参考链接2
综上所述,使用事件委托,有两个好处:
1.如果是好多同一类型的element需要触发相同的事件,name只需要绑定到parent或者更前的element即可
2.解决了数据动态传无法绑定的事情

你可能感兴趣的:(jquery)