标签:click 注册 color cti mouse ndt div class 事件委托
1.jq对象.on(‘事件名‘,事件处理函数)
$(‘p‘).on(‘click‘,function(){ console.log(‘on注册的事件‘) })
2.父元素.on(‘事件名‘,‘子元素‘,事件处理函数)
(1)
$(‘button‘).click(function(){ $(‘ <p>创建的p元素</p>‘).appendTo(‘.box‘) }) $(‘.box‘).on(‘click‘,‘p‘,function(){ console.log(‘on注册的事件委托‘) })
(2).e.stopPropagation() 阻止事件冒泡
$(‘.box‘).on(‘click‘, function () { console.log(‘父级元素本身的点击事件‘) }) $(‘.box‘).on(‘click‘, ‘p‘, function (e) { console.log(‘on注册的事件委托‘) e.stopPropagation() })
3.jq对象.事件名(事件处理函数)
$(‘.box‘).click(function(){ console.log(‘click注册事件‘) })
4..off() 事件解绑
(1).jq对象.off() 解绑所有事件
$(‘button‘).click(function () { $(‘.box‘).off() }) $(‘.box‘).on(‘click‘, function () { console.log(‘父级元素本身的点击事件‘) }) $(‘.box‘).on(‘click‘, ‘p‘, function (e) { console.log(‘on注册的事件委托‘) e.stopPropagation() })
(2)父元素.off("事件名","子元素") 解绑子元素的 指定事件
$(‘button‘).click(function () { $(‘div‘).off(‘click‘,‘p‘) }) $(‘.box‘).on(‘click‘, function () { console.log(‘父级元素本身的点击事件‘) }) $(‘.box‘).on(‘click‘, ‘p‘, function (e) { console.log(‘on注册的事件委托‘) e.stopPropagation() }) $(‘.box‘).on(‘mouseenter‘, ‘p‘, function (e) { console.log(‘on注册的事件委托‘) e.stopPropagation() })
(3)jq对象.off(‘事件名‘) 解绑指定事件
$(‘button‘).click(function () { $(‘p‘).off(‘click‘) }) $(‘p‘).on(‘click‘, function (e) { console.log(‘on注册的事件委托‘) }) $(‘p‘).on(‘mouseenter‘,function (e) { console.log(‘on注册的事件委托‘) })
5.触发事件
(1)jq对象.click()
$(‘div‘).on(‘click‘,function(){ console.log(‘div的点击事件‘) }) $(‘button‘).on(‘click‘,function(){ $(‘div‘).click() })
(2)jq对象.trigger(‘click‘)
$(‘div‘).on(‘click‘, function () { console.log(‘div的点击事件‘) }) $(‘button‘).on(‘click‘, function () { $(‘div‘).trigger(‘click‘) })
标签:click 注册 color cti mouse ndt div class 事件委托
原文地址:https://www.cnblogs.com/zhaodz/p/11625100.html