事件绑定
基本的事件绑定
var btn = document.getElementById('btn');
// dom 0 级绑定事件的方式
// 事件处理程序只能绑定一个，绑定多个事件处理程序后面的会覆盖前面的。
btn.onclick = function() {
console.log('1234');
// this === 绑定事件的dom对象
};
// dom2级绑定事件的方式
// 可以绑定多个事件处理程序，多个事件处理程序的执行顺序不能保证。
if(btn.addEventListener) {
btn.addEventListener('click', function(e) {
console.log('1234');
}, false);
} else {
// 兼容ie8及以下浏览器。
btn.attachEvent('onclick', function() {
var e = window.event;
});
}
//jQuery绑定事件方法
$('#btn').click(function(e){ // e =jQuery.fn.event
console.log('123456');
});
其他事件绑定
var $inputArray = $('.input-box input');
// jQuery构造函数传入选择器，返回的是一个jQuery的包装对象
// 大部分的api都是在jQuery包装对象上
// console.dir($inputArray);
//★focus()方法
$inputArray.focus(function(e) {
console.log(this.value); // this 就是当前的input标签
});
// ★change()方法，简单绑定事件，接受两个参数的情况
$inputArray.change('12334', function(e) {
console.dir(e); // jQuery封装的事件对象。
console.log(e.data);
});
// 事件方法被调用，但没有传递参数
// 代码触发此事件，并模拟当前事件对应的操作。
$inputArray[2].focus(); // 触发focuse事件，模拟获取焦点的操作。
On 替代bind方法/解绑用unbind
// on 替代 bind绑定事件的方式。
$('#btn').on('click', function(e) {
console.log(123);
});
on代替live动态创建元素绑定事件的方法/解绑用die
var domP = document.createElement('p');
//innerHTML(ie8) textContent(firefox)
//Chrome支持前两者
domP.innerHTML = "1234";
$(domP).on('click', function(e) {
console.log($(this).text());
})
On 替代delegate(委托事件)方法/解绑用undelegate
// On 替代delegate方法
$('.list').on('click', 'li', function(e) {
console.log( $(this).html() );
});
动态创建标签并绑定到树上
//js方法
var domP = document.createElement('p');
domP.innerHTML = "1234";
// 给页面中的body添加p标签
document.body.appendChild(domP);
//jq方法
var $domP = $('<p class=" a1">122222</p>');
// 给页面中的body添加$domP标签
$("body").append($domP);
解绑事件 .off()
// 解绑命名空间事件
// event.name 给事件命名，方便解绑制定名的
$("#btnOffNameSpace").on('click', function(e) {
// 解绑了命名空间的事件，
// 其他命名空间的事件或者没有命名空间的事件不受影响。
$('.list li').off('click.demo');
});
