JavaScript中Event对象

最新推荐文章于 2021-11-28 13:27:41 发布

scbiaosdo

最新推荐文章于 2021-11-28 13:27:41 发布

阅读量803

点赞数

分类专栏： JS

本文链接：https://blog.csdn.net/scbiaosdo/article/details/80767006

版权

JS 专栏收录该内容

30 篇文章 2 订阅

订阅专栏

事件监视器

一、确定事件源
二、编写监听器
三、绑定事件

1. 直接在某个html 控件上指定

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
<!--2)编写监听器-->
<script type="text/javascript">
    function testClick(){
        alert("点击成功了..") ;
    }
</script>
    </head>
    <body>
        <!--1)确定事件源  input标签上添加事件-->
        <input type="button" value="按钮" οnclick="testClick()"  /><!--3)绑定事件-->
</html>

2. getElementById(‘’) 获取控件后，再绑定

<html>
    <head>
    <script language="javascript">
        function test(){
            document.write("hello,world");
        }
    </script>
    </head>
    <body>
        <input type="button" value="点击" id="but1">
        <script language="javascript">
            document.getElementById("but1").οnclick=test;//这里绑定监听
       </script>
   </body>
</html>

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

addEventListener("事件名" , "事件处理函数" , "布尔值"); (注：事件名不含"on",如“click”)

布尔值，指定事件是否在捕获或冒泡阶段执行。（可选）

可能值:
true - 事件句柄在捕获阶段执行
false- false- 默认。事件句柄在冒泡阶段执行

<script>
var s=document.createElement("span");

s.addEventListener('click',function(){
    console.log(1);
},false);

s.addEventListener('click',fn1,false);    //调用时直接写函数名称即可
function fn1(){
    console.log(1);
};


</script>

事件编程的分类

事件句柄　(Event Handlers)
onabort     图像的加载被中断。
onbeforeunload事件    文档关闭前触发
onblur            元素失去焦点。
onchange     域的内容被改变。
onclick     当用户点击某个对象时调用的事件句柄。
ondblclick     当用户双击某个对象时调用的事件句柄。
onerror     在加载文档或图像时发生错误。
onfocus     元素获得焦点。
onkeydown     某个键盘按键被按下。
onkeypress     某个键盘按键被按下并松开。
onkeyup     某个键盘按键被松开。
onload      一张页面或一幅图像完成加载。
onmousedown     鼠标按钮被按下。
onmousemove     鼠标被移动。
onmouseout     鼠标从某元素移开。
onmouseover     鼠标移到某元素之上。
onmouseup     鼠标按键被松开。
onreset     重置按钮被点击。
onresize     窗口或框架被重新调整大小。
onscroll    用户拉动滚动条时触发
onselect     文本被选中。
onselectstart   用户选中文档body体的内容时触发
onsubmit     确认按钮被点击。
onunload     用户退出页面。

鼠标 / 键盘属性
altKey             返回当事件被触发时，"ALT" 是否被按下。
button             返回当事件被触发时，哪个鼠标按钮被点击。
clientX    返回当事件被触发时，鼠标指针的水平坐标。
clientY    返回当事件被触发时，鼠标指针的垂直坐标。
ctrlKey    返回当事件被触发时，"CTRL" 键是否被按下。
metaKey    返回当事件被触发时，"meta" 键是否被按下。
relatedTarget    返回与事件的目标节点相关的节点。
screenX    返回当某个事件被触发时，鼠标指针的水平坐标。
screenY    返回当某个事件被触发时，鼠标指针的垂直坐标。
shiftKey    返回当事件被触发时，"SHIFT" 键是否被按下。

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>

<script type="text/javascript">
     //和页面加载相关的事件
        function testLoad(){
            alert("页面中的body部分已经加载完毕了...") ;
        }

    //和单击点击相关的函数
        function testClick(){
            alert("点了...") ;
        }
        
    //和双击击点击相关的函数
        function testDbClick(){
            alert("你得双击...") ;
        }
        
        
    //获取焦点
        function testFocus(){
            //通过id属性
            var usrename = document.getElementById("username") ; //获取标签对象
            username.value =""     ;     //让文本框显示为空
        }
        
        
   //失去焦点(鼠标光标从文本输入框中移出来)
        function testBlur(){
            //获取用户在文本输入框中的内容
            var username = document.getElementById("username").value ;
            
            //获取span标签对象
            var nameTip = document.getElementById("nameTip") ;
            //如果输入的值不是"eric",就是提示用户名不符合规则
            if(username =="eric"){
                //给nameTip设置innerHTML属性
                nameTip.innerHTML = "校验成功,符合规则".fontcolor("#00ff00") ;
            }else {
                nameTip.innerHTML ="用户名不符合规则".fontcolor("#ff0000");
            }
        }
      

    //鼠标经过的事件
        function testMouseOver(){
            alert("鼠标经过了...") ;
        }
        
        
    //鼠标移出的事件
        function testMouseOut(){
            alert("鼠标移出了...") ;
        }
 //触发onchange事件相关的函数
        function testChange(){
            alert("选项卡已经发生变化了") ;            
        }
</script>
    </head>
    <body οnlοad="testLoad()">     //和页面加载相关的事件
<input type="button"  value="点我试试" οnclick="testClick()" /><br />  //单击事件
<input type="button" value="再点" οndblclick="testDbClick()"  /><br /> //双击事件
<input type="text" id="username" value="请输入6到12位的数字或者字母" size="25" οnfοcus="testFocus()" οnblur="testBlur()" /><span id="nameTip"></span>   //失去焦点与获得焦点
<div id="div1" οnmοuseοver="testMouseOver()" οnmοuseοut="testMouseOut()"></div>  //鼠标相关的事件
选项框
<select οnchange="testChange()" id="jiguan">
    <option value="请选择">请选择</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

    </body>
</html>