浅谈事件冒泡、事件委托、jQuery元素节点操作、

一、事件冒泡定义

事件冒泡是指在一个对象触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个事件会向这个对象的父级对象传播,从里到外,甚至它被处理(父级对象所有同类事件都将被激活),或者它到达了对象层级的最顶层,即document对象(有些浏览器是window).。

二、事件冒泡的作用

事件冒泡允许多个操作被集中处理(把事件处理器添加到一个父级元素上,避免把事件处理器添加到多个子级元素上),它还可以让你在对象层的不同级别捕获事件

三、阻止事件冒泡

事件冒泡机制有时候是不需要的,需要阻止掉,通过event.stopPropagation()来阻止

浅谈事件冒泡、事件委托、jQuery元素节点操作、

四、阻止默认行为

如:阻止右键菜单

五、合并阻止操作

实际开发中,一般把阻止冒泡和阻止默认行为合并起来写,合并写法如下:

浅谈事件冒泡、事件委托、jQuery元素节点操作、

六、事件委托

事件委托就是利用冒泡的原理,把事件加到父级上,通过判断事件来源的子集,执行相应的操作,事件委托首先可以极大减少事件绑定次数,提高性能;其次可以让新加入的子元素也可以拥有相同的操作。

1、一般绑定事件的写法:

2、事件委托的写法:(实际开发中,如果是对大量子元素进行操作时,应该用事件委托的方式,提高性能)

七、取消事件委托

用法:$("委托对象").undelegate()

八、jQuery元素节点操作1、创建节点

浅谈事件冒泡、事件委托、jQuery元素节点操作、

2、插入节点

  a、append()和appendTo() 在现存元素的内部,从后面插入元素

  

浅谈事件冒泡、事件委托、jQuery元素节点操作、

  输出结果为:

  

浅谈事件冒泡、事件委托、jQuery元素节点操作、

  b、prepend()和prependTo() 在现存元素的内部,从前面插入元素

  

浅谈事件冒泡、事件委托、jQuery元素节点操作、

  输出结果:

  

浅谈事件冒泡、事件委托、jQuery元素节点操作、

  c、after()和insertAfter() 在现存元素的外部,从后面插入元素

  

浅谈事件冒泡、事件委托、jQuery元素节点操作、

  输出结果:

  

浅谈事件冒泡、事件委托、jQuery元素节点操作、

  d、before()和insertBefore() 在现存元素的外部,从前面插入元素

  

浅谈事件冒泡、事件委托、jQuery元素节点操作、

  输出结果:

  

浅谈事件冒泡、事件委托、jQuery元素节点操作、

3、删除节点

  $(selector).remove();

  

4、to do list(计划列表)实例

浅谈事件冒泡、事件委托、jQuery元素节点操作、

浅谈事件冒泡、事件委托、jQuery元素节点操作、

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wyjdpd.html