1.事件对象
事件处理函数的一个标准特性是,以某些方式访问的事件对象包含有关于当前事件的上下文信息。
IE的实现与W3C的规范有差别。
IE使用一个独立的全局事件对象(window.event),而其他浏览器则使用独立的包含事件对象的参数传递。
<textarea id="txt" type="text"></textarea>
<script>
document.getElementById('txt').onkeypress=function(e){
// 如果不存在事件对象,则获取全局(仅IE)的对象
e = e|| window.event;
// 敲击回车,返回false,不换行
return e.keyCode !=13;
}
</script>
2.this 关键字
this关键字在函数的范围内,作为一种访问当前对象的方式。现代浏览器使用this关键字为所有的事件处理函数提供一些上下文。
var li =document.getElementsByTagName('li');
for (var i=0; i<li.length;i++) {
li[i].onclick = handleClick;
}
function handleClick() {
this.style.background = 'blue';
this.style.color = 'white';
}
3.取消事件冒泡
<div>
<ul>
<li><a href="http://www.baidu.com">baidu</a></li>
<li><a href="http://www.qq.com">qq</a></li>
<li><a href="http://www.github.com">github</a></li>
</ul>
</div>
// 阻止事件冒泡
function stopBubble (e) {
if (e && e.stopPropagation) {
e.stopPropagation()
} else {
window.event.cancelable = true;
}
}
var all =document.getElementsByTagName('*');
for (var i=0; i<all.length;i++) {
all[i].onmouseover =function(e){
this.style.border = '1px solid red'
stopBubble(e);
}
all[i].onmouseout =function(e){
this.style.border = 'none'
stopBubble(e);
}
}
4.阻止浏览器的默认行为
以下是浏览器默认行为的例子:
* 点击< a >标签将重定向到它的href特性上的URL
* 使用键盘Ctrl + S , 浏览器将保存网站的HTML文件
* 提交HTML< from >将向指定的URL提交数据,并重定向浏览器到该地址上。
* 鼠标移动到一个有alt或title< img >上将会出现工具条,提示< img >的描述。
// 防止默认浏览器行为
function stopdefault (e) {
if (e && e.preventDefalut) {
e.preventDefalut()
} else {
window.event.returnValue = false;
}
return false;
}
var a =document.getElementsByTagName('a');
for (var i=0; i<a.length;i++) {
a[i].onclick =function(e){
console.log(this.href);
return stopdefault(e);
}
}