⚠️ 动态添加的子元素一定要放在on()方法里面,并且on()方法里面的 childSelector 必须要是 selector 的子元素,否则动态添加的元素绑定的事件依旧无效
最好是在元素生成的时候就加上事件,不然的话比较麻烦。
在jquery中,你也可以用live()和delegate()这样的方法绑定元素,是实时监听的。
但是最好还是在元素生成的时候就加上事件:
$('#btn').bind('click', function(event) {/* Act on the event */
$("<li>Hello</li>").appendTo("#list").bind('click', function(event) {
/* Act on the event */
console.log($(this).text())
})
})
在mootools中对应的方法:
// Creating an new anchor with an Objectvar myAnchor = new Element('a', {href: 'http://mootools.net',
'class': 'myClass',
html: 'Click me!',
styles: {
display: 'block',
border: '1px solid black'
},
events: {
click: function(){
alert('clicked')
},
mouseover: function(){
alert('mouseovered')
}
}})
js 有办法 判断一个dom元素是否已经绑定了某个事件!代码如下:
/*
* 事件注册
* @param Element ele
* @param String eventType
* @param Functionfn
* @param Boolean isRepeat
* @param Boolean isCaptureCatch
* @return undefined
*/
function loginEvent(ele , eventType , fn , isRepeat , isCaptureCatch){
if (ele == undefined || eventType === undefined || fn === undefined) {
throw new Error('传入的参数错误!')
}
if (typeof ele !== 'object') {
throw new TypeError('不是对象!')
}
if (typeof eventType !== 'string') {
throw new TypeError('事件类型错误!')
}
if (typeof fn !== 'function') {
throw new TypeError('fn 不是函数!')
}
if (isCaptureCatch === undefined || typeof isCaptureCatch !== 'boolean') {
isCaptureCatch = false
}
if (isRepeat === undefined || typeof isRepeat !== 'boolean') {
isRepeat = true
}
if (ele.eventList === undefined) {
ele.eventList = {}
}
if (isRepeat === false) {
for (var key in ele.eventList)
{
if (key === eventType) {
return '该事件已经绑定过!'
}
}
}
// 添加事件监听
if (ele.addEventListener) {
ele.addEventListener(eventType , fn , isCaptureCatch)
} else if (ele.attachEvent) {
ele.attachEvent('on' + eventType , fn)
} else {
return false
}
ele.eventList[eventType] = true
}