js 为动态添加的元素绑定事件

JavaScript030

js 为动态添加的元素绑定事件,第1张

想必大家都有遇到过,DOM动态添加的元素,你给它绑定的事件是不起作用的。目前有两种办法,为动态添加的元素绑定事件

⚠️ 动态添加的子元素一定要放在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

}