您的位置：首页 > 其它

事件切换

2016-03-21 01:03 330 查看

还记得大一的时候，老是想着通过代码实现一点看上去很有趣的事，不过那时学的是C++，学的不好，当然也没能通过代码直观的做点东西，后来知道这个直观的东西可以简单说是“事件”。当然也就是通过代码做了一件事。

例如：在html里有一个div块，我们通过事件切换使之交替改变颜色，那么这里就要用到JS的事件切换

..........
...........................
<script type = "text/javascript" src = "demo.js"></script>
<style type="text/css">
.red{
width:400px;
height:400px;
background:red;
}
.blue{
width:400px;
height:400px;
background:blue;
}
</style>
</head>
<body>
<div id = "box"  class = "red">测试</div>
...............
.....

　　js部分的切换功能：

方案1：

//事件切换器
window.onload = function () {
var box = document.getElementById("box");
box.onclick = toBlue;
}

function toRed () {                    //如果toRed绑定了box.onclick,则this就是box，全局执行的话this就是window
this.className = "red";
this.onclick = toBlue;

}

function toBlue () {
this.className = "blue";
this.onclick = toRed;

}

方案2：

function addEvent (obj,type,fn) {
var saved = null;
if(typeof obj['on'+type] == 'function'){
saved = obj['on'+type];   //保存上一个事件
}
obj['on'+type] = function () {
if(saved)saved();
fn.call(this);
}

}

function removeEvent(obj,type){
if(obj['on'+type])obj['on'+type]=null;
}

addEvent(window,'load',function () {

var box = document.getElementById("box");
removeEvent(box,'click');
//addEvent(box,'click',function () {
//alert("Lee");
//});
addEvent(box,'click',toBlue);

});

function toRed () {                    //如果toRed绑定了box.onclick,则this就是box，全局执行的话this就是window
this.className = "red";
removeEvent(this,'click');
addEvent(this,'click',toBlue);

}

function toBlue () {
this.className = "blue";
removeEvent(this,'click');
addEvent(this,'click',toRed);

}

方案3：对于事件切换除了方案2，W3C本身提供了一种方法，如下分别为addEventListener,removeEventListener

window.addEventListener("load",function () {
var box = document.getElementById("box");
box.addEventListener("click",toBlue,false); //false表示冒泡，true表示捕获
},false);

function toRed () {                    //如果toRed绑定了box.onclick,则this就是box，全局执行的话this就是window
this.className = "red";
this.removeEventListener("click",toRed,false);
this.addEventListener("click",toBlue,false);

}

function toBlue () {
this.className = "blue";
this.removeEventListener("click",toBlue,false);
this.addEventListener("click",toRed,false);

}

事件切换-IE自有的方案：方法有attachEvent，detachEvent

window.attachEvent('onload',function(){
var box = document.getElementById("box");
box.attachEvent('onclick',toBlue);
});

function toRed () {
var that = window.event.srcElement;  //该方法不能传递this，只能通过这样获取that了
that.className = 'red';
that.detachEvent('onclick',toRed);
that.attachEvent('onclick',toBlue);

}

function toBlue () {
var that = window.event.srcElement;
that.className = 'blue';
that.detachEvent('onclick',toBlue);
that.attachEvent('onclick',toRed);

}

兼容方案：

//跨浏览器添加事件
function addEvent(obj,type,fn) {
if(obj.addEventListener){
obj.addEventListener(type,fn,false);
}else if(obj.attachEvent){
obj.attachEvent('on'+type,fn);
}
}

//跨浏览器移除事件
function removeEvent(obj,type,fn) {
if(obj.removeEventListener){
obj.removeEventListener(type,fn,false);
}else if(obj.detachEvent){
obj.detachEvent('on'+type,fn);
}
}

function getTarget(evt){
if(evt.target){        //w3c
return evt.target;
}else if (window.event.srcElement)   //IE
{
return window.event.srcElement;
}
}

addEvent(window,'load',function() {
var box = document.getElementById("box");
addEvent(box,'click',toBlue);

});

function toRed (evt) {
var that = getTarget(evt);
that.className = 'red';
removeEvent(that,'click',toRed);

addEvent(that,'click',toBlue);

}

function toBlue (evt) {
var that = getTarget(evt);;
that.className = 'blue';
removeEvent(that,'click',toBlue);

addEvent(that,'click',toRed);

}

以上就是通过代码写了一个点击事件，点击鼠标右键就可以不断将div块的颜色在红、蓝两种颜色之间切换了，是不是像魔术？

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

标签：

相关文章推荐

新的分享

章节导航