jQuery is not must for us——事件

jquery

在这里我们将对比Web提供的事件API与jQuery 事件函数间的差别。jQuery给我们提供了非常好的事件API,但理解好底层是如何实现的可以帮助我们更好的使用jQuery,同时遇到错误也能修复。

  • 发送DOM事件
  • 发送自定义事件
  • 监听事件
  • 移除事件句柄
  • 修改事件
  • 事件预测
  • 键盘事件
  • 鼠标事件
  • 浏览器加载事件
  • 老式浏览器的支持

DOM事件发送

以点击事件为例：
focus/blur/submit语法相同

jQuery

$(a).click();

DOM API

a.click();

自定义事件

jQuery

/*触发一个事件(custom-event)*/
$('element').trigger('custom-event');

DOM API

var event = document.createEvent('Event');
event.initEvent('custom-event', true, true); /*第二和第三参数说明属于冒泡事件并可取消默认事件*/
someElement.dispatchEvent(event);	/*发起事件*/
/*ie not support*/
var event = new CustomEvent('custom-event', {bubbles: true, cancelable: true});
someElement.dispatchEvent(event);

事件监听

jQuery

$('element').on('click', function(){
	/*当点击的时候做点什么*、
})

DOM API

/*ie 9*/
element.addEventLister('click', function(){
	/*当点击的时候做点什么*、
})

移除事件

jQuery

/*jquery还提供了一个移除某元素上所有事件的api*/
$('element').off('click', myEventHander);

DOM API

elment.removeEventLister('click', myEventHander);

事件修改

阻止事件冒泡

jQuery

$(element).on('event', function(event){
	event.stopPropagation();
})

DOM API

element.addEventListener('event', function(event){
	event.stopPropagation();
})

阻止其它事件对当前元素的影响

jQuery

$(element).on('event', function(event){
	event.stopImmediatePropagation();
})

DOM API

element.addEventListener('event', function(event){
	event.stopImmediatePropagation();
})

阻止浏览器默认事件，比如一个a标签的跳转事件

jQuery

$(Aelement).on('click', function(event){
	event.stopPropagation();
})

DOM API

Aelement.addEventListener('click', function(event){
	event.preventDefault();
})

预测事件

<ul id="my-list">
    <li>foo <button>x</button></li>
    <li>bar <button>x</button></li>
    <li>abc <button>x</button></li>
    <li>123 <button>x</button></li>
</ul>

点击按钮的时候删除其li标签

jquery

$('#my-list').on('click', 'BUTTON', function() {
    $(this).parent().remove();
});

DOM API

document.getElementById('my-list').addEventListener('click', function(event) {
    var clickedEl = event.target;
    if(clickedEl.tagName === 'BUTTON') {
       var listItem = clickedEl.parentNode;
       listItem.parentNode.removeChild(listItem);
    }
});

键盘事件

jquery

$(document).keydown(function(event){
	if(event.ctrlkey && event.which === 72){
		/*ctrl+H*/
	}
})

DOM API

document.addEventListener('keydown', function(event) {
    if (event.ctrlKey && event.which === 72) {
        /*ctrl+H*/
    }
});

鼠标事件

jquery

$('element').hover(function hoverIn(){
	
},
function hoverOut(){
	
})

DOM API

someEl.addEventListener('mouseover', function() {
});
someEl.addEventListener('mouseout', function() {
});

浏览器加载事件

  • 文档加载
  • 样式加载
  • 图片加载
  • iframes加载

jquery

$(window).load(function(){
	/*页面加载并渲染完毕*/
})

DOM API

window.addEventListener('load', function(){
	/*页面加载并渲染完毕*/
})

文档加载完毕但未渲染

jquery

$(document).ready(function(){
	/*文档加载完毕*/
})

DOM API

document.addEventListener('DOMContentLoaded',function(){
	
})

jquery

DOM API

Prev Next