js事件,事件,什么是事件
您的位置: 主页 > web前端培训文章 >

js中的事件是什么意思?【访问量:54】

javascript事件
事件,就是一件事情,是一件鼠标或键盘 对页面中的标签做的一些动作的事情就叫做事件
比如1:我们常常用鼠标点击页面中的标签,这就是点击的事情叫做点击事件
比如2:我们用鼠标移入或移出标签的时间,这就是鼠标移出移入事件
比如3:我们在键盘上 按快捷键的时候 ,网页上发生变化,这就是键盘事件
 
onClick 鼠标点击事件,多用在某个标签被鼠标点击
onDblClick 鼠标双击事件
onMouseDown 鼠标上的按钮被按下了
onMouseUp 鼠标按下后,松开时激发的事件
onMouseOver 当鼠标移动到某标签范围的上方时触发的事件
onMouseMove 鼠标移动时触发的事件
onMouseOut 当鼠标离开某标签范围时触发的事件
 
 
 
     
 
用法:
标签.onclick=function(){
   //点击标签的时候执行的代码
}
 
以上中文解释: 标签当被鼠标点击的时候 执行函数里面的代码
 
 
实际例子:
<div class=”box”>点击我吧,哈哈</div>
<script>
Document.querySelector(“.box”).click=function(){
Alert(“你做的很对!请在点击下试试看”)
}
</script>
 
 
 
 
一.事件状态event)
事件状态 的作用:监控当前发生事件的一些 数据 及事件数据的一些设置
事件状态有2种:
IE浏览器:
event 属于IE浏览器的事件状态
标签.onclick=function(){  event}
 
其他浏览器:
传参的形式属于 其他浏览器的事件状态
标签.onclick=function(e){ e }
 
下面是事件状态的一些应用:
1.事件冒泡:就是子元素在执行某类事件的时候,会相应的
    去触发父元素某类事件,这种行为 就叫做事件冒泡
   
 
    阻止事件冒泡:阻止当前事件会触发到父标签上
    IE浏览器: event.cancelBubble=true;  解释: cancel 取消  Bubble 冒泡
其他浏览器: e.stopPropagation()     解释:stop停止  Propagation 表示延续
 
 
比如:
red.onclick=function(e){
    //阻止事件 冒泡 到 父标签中
    if(e){
        e.stopPropagation(); // 非IE的浏览器阻止方法(新的IE 也有效 )
    }else{
        event.cancelBubble=true; // IE浏览器的阻止方法
    }
}
 
 
 

 
 
2事件的默认行为:事件的默认行为 也是 浏览器的默认行为:
    比如:当我们在浏览器中点击一个超链接的时候,页面将会
    发生跳转 这种行为就是 浏览器的默认行为
 
    再比如:你用鼠标在页面中 右击的时候 会出现 浏览器的菜单
            这也是浏览器的默认行为
    <a href="http://www.baidu.com">百度</a>
 
    阻止浏览器的默认行为:
    其他浏览器:事件状态.preventDefault()
    IE浏览器: 事件状态.returnValue=false;
解释:prevent 表示阻止   Default表示默认
 
比如:
1.阻止超链接 点击跳转
var a=document.querySelector("a");
a.onclick=function(e){
    if(e){
        e.preventDefault();
    }else{
        event.returnValue=false;
    }
}
2.阻止浏览器默认 右击菜单
// 右击菜单事件 oncontextmenu
document.oncontextmenu=function(e){
    if(e){
        e.preventDefault();
    }else{
        event.returnValue=false;
    }
}
 
 
 
 
3.事件委托
 事件的委托: 把事件绑定在父元素上 让子元素去触发事件并完成事件效果。
 事件委托主要通过 srcElement; 和 target实现
 
通过事件状态可以得到  触发事件的元素:
 IE浏览器:  事件状态.srcElement;
 其他浏览器:  事件状态.target
 
例如:1.得到触发事件的 目标元素
box.onclick=function(e){
    var ele;
    if(e){
        ele= e.target;
    }else{
        ele= event.srcElement;
    }
}
 

 
 
二.事件监听
事件监听:事件监听 就是给标签绑定事件
    一.运用事件监听给标签绑定事件的优点:
    1.同一个事件 可以多次绑定 , 普通的事件 如果多次绑定
     会发生覆盖,那么事件监听多次绑定是不会覆盖
    2.给标签 绑定的事件 后面可以解绑的
 
    二.事件监听的写法:
    其他浏览器: 标签.addEventListener("事件的名称",事件要执行的函数);
    特点:
        1.事件的执顺序 是从前往后的
        2.执行函数里面的this 表示当前触发事件的标签
 
    IE浏览器:   标签.attachEvent("on事件的名称",事件要执行的函数);
    特点:
        1.事件的执行顺序 是从后往前的
        2.执行函数里面的this 表示当前的window 对象
 
  兼容写法:
function addEvent(ele,eventType,fnctions){
    if(ele.attachEvent){
        // IE的
        ele.attachEvent("on"+eventType,function(){
            fnctions.call(ele);
        });
    }else{
        //其他浏览器
        ele.addEventListener(eventType,fnctions);
    }
}
addEvent(btn,"click",function(){ this.style.background="red"});
 
 
 
三.解绑事件
解绑事件: 就是把之前绑定的事件 给解除掉
IE 浏览器: detachEvent("事件类型",函数名字)            
单词:detach 表示拆开
其他浏览器: removeEventListener("事件类型",函数名字)   
单词:remove 表示 已开 或删除
 
注意:事件解绑 只能解绑 带名字的函数
 
例如:
<input class="a" type="button" value="点击的按钮">
<input class="b" type="button" value="解绑事件">
 
var a=document.querySelector(".a");
var b=document.querySelector(".b");
//事件的绑定
function abc(){
    alert(1);
}
function efg(){
    alert(2);
}
if(a.attachEvent){
    a.attachEvent("onclick",abc);
    a.attachEvent("onclick",efg);
}else{
    a.addEventListener("click",abc);
    a.addEventListener("click",efg);
}

//事件解绑
b.onclick=function(){
    if(a.detachEvent){
        a.detachEvent("onclick",abc)
    }else{
        a.removeEventListener("click",abc)
    }

}
 
 
 
 
 
 
 
 
 
 
 
 
 
2018-03-11
匿名评论