您的位置：首页 > Web前端 > JavaScript

js的event事件

2016-03-03 15:40 627 查看

一 . 焦点:使浏览器能够区分区分用户输入的对象，当一个元素有焦点的时候，那么他就可以接收用户的输入。

我们可以通过一些方式给元素设置焦点

1.点击 2.tab 3.js

不是所有元素都能够接受焦点的，能够响应用户操作的元素才有焦点（比如：输入框，可以响应用户的输入按钮-可以响应用户的点击操作 a标签-可以响应用户的跳转等）

Obj.onfocus=function(){} obj.onblur=function(){} obj.focus(); obj.blur()

obj.select()------会把obj的内容全部选中（选中的内容是可交互性的文本内容）

<input type="text" id="txt">
<button id="btn">选中文字</button>
window.onload=function(){
var txt = document.getElementById('txt');
var btn = document.getElementById('btn');
btn.onclick = function () {
txt.select();
}
}

二. event：事件对象，当一个对象发生的时候，和当前这个对象发生的这个事件有关的一些详细的信息都会被临时保存到一个指定的地方event对象，供我们在需要的时候调用。

如果一个函数是被事件函数调用的，那么，这个函数定义的第一个参数就是事件对象（event）,它是一个内置的全局对象。

在使用的时候有浏览器兼容的问题在标准的浏览器下可以直接取到event 而在非标准的浏览下，是取不到的。 Var ev = ev || event; ----解决了兼容性的问题。

document.onclick = function () {
fn();
}
function fn (ev){
var ev = ev || event;
alert(ev);
for (attr in ev) {
console.log(attr + '=' + ev[attr]);
}
}

三. clientX clientY ---当一个事件发生的时候，鼠标到页面可视区的距离

一个小小的列子  div跟随鼠标移动

<!DOCTYPE html>
<html ng-app = 'myApp'>
<head>
<title></title>
<meta name="name" content="content" charset="utf-8">
<style type="text/css" media="screen">
div{width:100px;height: 100px;background-color: red;position: absolute;}
</style>
<script type="text/javascript">
window.onload = function () {
var oDiv = document.getElementById('div1');
document.onmousemove = function (ev) {
var ev = ev || event;
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

oDiv.style.left = ev.clientX + 'px';
oDiv.style.top = ev.clientY + scrollTop + 'px';

}
}
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>

四.事件流

事件冒泡：当一个元素接收到事件的时候，会把他接受到的所有传播给他的父级，一直到顶层window.

<style type="text/css" media="screen">
div{padding: 40px;}
#div1{background-color: red;}
#div2 {background-color: blue;}
#div3 {background-color: green;}
</style>
<script type="text/javascript">
window.onload = function () {
var oDiv1 = document.getElementById('div1');
var oDiv2 = document.getElementById('div2');
var oDiv3 = document.getElementById('div3');

function aa(){
alert(this.id);
}
oDiv1.onclick = aa;
oDiv2.onclick = aa;
oDiv3.onclick = aa;
}
</script>
<div id="div1">
<div id="div2">
<div id="div3"></div>
</div>
</div>

当点击div3的时候，会依次弹出div3 div2 div1,当点击div2的时候，会依次弹出div2 div1,这个就是冒泡机制，会依次向父级一直冒泡，直至window.

阻止冒泡：当前要阻止冒泡的事件函数中调用event.cancelBubble = true;或者 event.stopPropagation();

绑定事件：给一个对象的同一个事件绑定多个不同的函数

兼容性：ie：obj.attachEvent(事件名称，事件函数)

没有捕获

事件名称有on

事件函数执行的顺序：标准的ie下为---正序非标准的ie下为---倒序

This指向window

标准：obj.addEventListener(事件名称，事件函数，是否捕获)

有捕获

事件名称没有on

事件执行的顺序是正序

This指向触发改事件的对象

window.onload = function () {
var oDiv1 = document.getElementById('div1');
function aa(){
alert(this);
}
function bb(){
alert(1);
}
//          正常情况下，bb函数会覆盖aa函数，值弹出1.
//          oDiv1.onclick = aa;
//          oDiv1.onclick = bb;
//          在ie下，函数都会执行，但是执行的顺序不一样
//          oDiv1.attachEvent('onclick',aa);
//          oDiv1.attachEvent('onclick',bb);
//          在标准浏览器下，函数都会正序执行
oDiv1.addEventListener('click',aa,false);
oDiv1.addEventListener('click',bb,false);
}

解决this的指向不同，利用call()方法，改变this的指向

Call()方法，改变this的指向 call方法的第一个参数可以改变函数执行过程中的内部this的指向,call方法第二个参数开始就是原来函数的参数列表

function fn1(a){

alert(this);

}   　　function fn2(a,b){

alert(this);

alert(a+b);

}

//fn1();   //window

// fn1.call(1); //1

fn2.call(1,2,3)  //1  5

fn2.call(null,2,3) //window 5

兼容ie以及标准浏览器的事件绑定函数

function bind(obj,evname,fn) {
if (obj.addEventListener) {
obj.addEventListener(evname,fn,false);
} else {
obj.attachEvent('on'+evname, function () {
fn.call(obj);
})
}
}

关键一句：在W3C（或支持事件捕获的）浏览器中，先发生捕获的过程，再发生冒泡的过程。

oDiv1.addEventListener('click',function(){
alert(1);
},true);          //捕获事件
oDiv1.addEventListener('click',function(){
alert(2);
},false);          //冒泡事件
oDiv3.addEventListener('click',function(){
alert(3);
},true);                 //捕获事件

当点击div1的时候，会弹出1 2

当点击div2的时候，会弹出1 2

当点击div3的时候会弹出 1 3 2

点击div1的时候，是捕获事件，会从最外层开始开始捕获事件，div1有2个事件，捕获时，弹出1，冒泡是弹出2. 所以会弹出1 2

点击div2的时候，由于div2没有加事件，但是它默认的会执行捕获事件，从最外层开始，一直到div2 然后再向外层冒泡所以会弹出 1 2

点击div3的时候是捕获事件，从最外层开始，一直到div3 ，然后再向外层冒泡所以会弹出 1 3 2

取消事件绑定

ie : obj.detachEvent(事件名称，事件函数)

标准：obj.removeEventListener(事件名称，事件函数，是否捕获)

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航