js的事件驱动机制

最新推荐文章于 2023-06-19 17:37:23 发布

yanner_

最新推荐文章于 2023-06-19 17:37:23 发布

阅读量886

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/yanner_/article/details/78260702

版权

JavaScript 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

1.理解事件驱动机制
（1）
这里写图片描述
（2）js中的事件分类
鼠标事件：当用户在页面上用鼠标点击页面元素时，对应的dom节点会触发鼠标事件。主要有click、dblclick、mousedown、mouseout、mouseover、mouseup、mousemove等。
键盘事件：当用户用键盘输入信息时，会触发键盘操作事件。主要包括keydown、keypress、keyup三个。
HTML事件：在html节点加载变更等相关的事件，比如window的onload、unload、abort、error，文本框的select、change等等。
其他事件：页面中一些特殊对象运行过程中产生的事件，比如xmlhttprequest对象的相关事件。
（3）鼠标事件案例

<script>
function test1(e){
    window.alert("x="+e.clientX+"y="+e.clientY);
}

function test2(e){
    //document.writeln("x="+e.clientX+"y="+e.clientY);
    window.alert("ok");
}
</script>
<body style="width:1000px;height:1000px;"onmousedown="test1(event)" onmousemove="test2(event)">
</body>

（4）键盘事件案例

<script>
        function test6(e){
            window.alert("输入框被选中");
        }
</script>
<input type="text" onfocus="test6()"/>

（5）HTML事件案例
onload:页面打开
onbeforeunload:关闭页面前
onunload:关闭页面

        function test7(e){
            window.alert("onload");
            //把鼠标定位到text输入框
            document.getElementById('text1').onfocus();
        }

        function test8(e){
            window.alert("unonload");
        }
        function test9(e){
            window.alert("onbeforeunload");
        }
        <body onload="test7()"onbeforeunload="test9()" onunload="test8()">

2.Javascript访问样式表
（1）访问内部样式表

//js如何访问元素的style属性，进行样式修改
function test4(event){
    window.alert(event.value);
    if(event.value=="黑色"){
        //获取div1
        var div1=document.getElementById('div1');
        div1.style.backgroundColor="black";
    }else if(event.value=="红色"){
        var div1=document.getElementById('div1');
        div1.style.backgroundColor="red";       
    }
}

<!--如何通过修改style来改变style-->
<div id="div1" style="width:400px;height:300px;background-color:red">div1</div>
<input type="button" value="黑色" onclick="test4(this)"/>
<input type="button" value="红色" onclick="test4(this)"/>

（2）访问外部样式表

<script>
    function test4(event){
        //获取mycss.css中所有class选择器都获取 
        var ocssRules=document.styleSheets[0].osRules;//ocssRules[0]表示mycss.css文件的第一个规则
        //从ocssRules中取出你希望的class
        var style1=ocssRules[0];
        if(event.value=="黑色"){
            style1.style.backgroundColor="black";
        }else if(event.value=="红色"){
            style1.style.backgroundColor="red";
        }
    }
</script>
<div id="div1" class="style1">div1</div>
<input type="button" value="黑色" onclick="test4(this)"/>
<input type="button" value="红色" onclick="test4(this)"/> 
//外部css
.style1{
    width:600px;
    height:400px;
    background-color:black;
}

3.一个事件被多个函数监听

<script>
        function test4(e){
            window.alert("ok1");
        }
        function test5(e){
            window.alert("ok2")
        }
</script>
<input type="button" value="黑色" onclick="test4(this),test5(this)"/>

4.如何绑定事件监听
（1）直接在某个html控件上指定

<input type="button" value="刷新页面" onclick="test()">

（2）getElementById(”)获取控件后，再绑定

function test(){
    document.write("hello");
}   
<input type="button" id="but1" value="刷新页面"/>
<script language="javascript">
document.getElementById("but1").onclick=test;   
</script>

（3）通过addEventListener()或者是attachEvent()来绑定

function test(){
    window.alert('你投了一次票');
    //解除事件绑定
    document.getElementById("but1").removeEventListener("onclick",test);
}
<input type="button" id="but1" value="投票"/>
<script language="javascript">
document.getElementById("but1").addEventListener("onclick",test);   
</script>

（4）一个事件被多个函数监听

yanner_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js的事件驱动机制

1.理解事件驱动机制（1）（2）js中的事件分类鼠标事件：当用户在页面上用鼠标点击页面元素时，对应的dom节点会触发鼠标事件。主要有click、dblclick、mousedown、mouseout、mouseover、mouseup、mousemove等。键盘事件：当用户用键盘输入信息时，会触发键盘操作事件。主要包括keydown、keypress、keyup三个。
复制链接

扫一扫

专栏目录