关于自定义事件及triggerHandler的问题
来源：5-7 首页.UI组件-UiSlider（2）
慕仙0287733
2020-07-13 22:11:22
wrap
.on('move_prev',function () {
if(current <= 0){
current = size;
}
current = current - 1;
wrap.triggerHandler('move_to',current);
})
.on('move_next',function () {
if(current >= size-1){
current = -1;
}
current = current + 1;
wrap.triggerHandler('move_to',current);
})
.on('move_to',function (evt,index) {
wrap.css('left',index*width*-1);
tips.removeClass('item_focus').eq(index).addClass('item_focus');
})
.on('auto_move',function () {
setInterval(function () {
enableAuto && wrap.triggerHandler('move_next');
},2000)
})
.triggerHandler('auto_move');
这段代码有3个问题想问下老师：
1, wrap.on().on().on()...这种写法代表着什么意思, 跟wrap.on();wrap.on();wrap.on()这样分开写有什么区别吗?
2, wrap.on('move_prev',function () {}) 既然称为自定义事件, 那就是要跟用户交互才能触发, 那视频中的代码在哪跟用户交互了? 而且, 这里为什么不直接声明一个函数呢? 这样用的时候直接调用就行了， 就不需要一个特定的条件触发事件了。自定义事件如果不用jQuery, 使用原生JS也是这种写法吗?
3, jQuery 中 triggerHandler 是个什么用法呢? 我的理解就是直接调用了自定义事件, 在原生JS中调用自定义事件是使用什么方法啊?
1回答
-
同学你好，问题解答如下：
1. “wrap.on().on().on()”这种写法叫做链式操作，是jq支持的一种写法，它就是给元素多次绑定事件，与“wrap.on();wrap.on();wrap.on()”这种分开写是一样的，没有区别。
2. “ wrap.on('move_prev',function () {})”是给元素绑定自定义事件“move_prev”，该事件是在点击“btn_prev”按钮时触发，如下：
也就是用户点击“btn_prev”按钮时，会触发这个自定义事件。
可以不使用自定义事件，直接书写一个函数，然后在“btn_prev”按钮的点击事件中调用即可，代码的实现方式并不唯一；这样写，可以给大家扩展一下自定义事件的应用。
3. 原生js书写自定义事件，写法和jq不一样。需要使用“initEvent”方法初始事件，使用“addEventListener”绑定事件，然后使用“dispatchEvent”派发自定义事件。jq是对原生的方式进行了封装，简化了使用。对于原生的方式，同学了解一下即可。
4.“triggerHandler”是触发自定义事件（同学理解成调用自定义事件也可以），在原生中，使用“dispatchEvent”触发自定义事件，可以参考如下例子：
如果我的回答帮到了你，欢迎采纳，祝学习愉快！
0
相似问题
回答 1
回答 1