zoukankan      html  css  js  c++  java
  • JavaScript事件处理方式

    一、直接在HTML标记中指定,这种方法普遍使用

    <INPUT TYPE button value="submit" onclick="show();">

    如上,在单击submit按钮的时候,就会调用show()方法。

    二、编写特定对象,特定事件的JavaScript

    1 <script language="JavaScript" for="window" event="onload">
    2 </script>

    这个例子就是一个指向window对象,当它在加载的时候,触发这段script代码。

    三、在JavaScript中添加代码,指向特定对象

    <script language="JavaScript">
    var a = document.getElementById("username");
    a.onblur = function(){
    
        alert(a.value);
    
    }
    </script>

    这个例子中,有一个Id为username的控件(可以是一个text文本框)。当这个控件失去焦点的时候,会执行这段script代码。注意的是,这段script代码要写在这个控件的下方,否则在加载的时候,会发生因为找不到该控件而报的空指针错误。

     实用事件举例:

    1、获取键盘按键值

    <SCRIPT LANGUAGE="JavaScript">
    <!--
        function keyDown(event){
            event = event||window.event;//兼容两种浏览器,前者兼容firefox,后者兼容IE
            var s = "";
            s+="Alt:"+event.altKey;//ctrlKey,shiftKey,keyCode,type等熟悉
            document.write(s);//打印输出
        }
        document.onkeydown=keyDown;//触发事件
    //-->
    </SCRIPT>

    2、鼠标事件

    <HEAD>
    <Script LANGUAGE="JavaScript">
        function mousemove(event){
            event=event||window.event;
            var s ="";
             s+=event.button;//clientX clientY 客户端上的坐标值
                                        //offsetX offsetY 相对于鼠标点击对象位置的坐标     onfilterchange事件的滤镜对象   event.srcElement获取屏幕上的元素
             document.write(s);
        }
    </Script>
    </HEAD>
    <BODY>
    <input type = "button" value = "ok" onmousedown="mousemove(event)"/>
    </BODY>

    3、事件的冒泡问题

    问题描述:div(底层)中事件会向body(上层)中同类事件传递

    解决方法:IE 事件对象.cancelBubble = true;    火狐 事件对象.stopPropagation();

    一些常用的事件:onsubmit  onfocus  onblur  onmouseover(鼠标移动到控件上面时触发)  Onmousemove(当鼠标移动时,触发)

    参考资料:http://www.w3school.com.cn/js/js_htmldom_events.asp

  • 相关阅读:
    Python数据分析与机器学习-Pandas_1
    Python数据分析与机器学习-NumPy_5
    Python数据分析与机器学习-NumPy_3
    Python数据分析与机器学习-NumPy_4
    Python数据分析与机器学习-NumPy_2
    Python数据分析与机器学习-NumPy_1
    早起的鸟儿会摔倒
    我讨厌这样的自己
    依然很迷茫?
    孵客总结
  • 原文地址:https://www.cnblogs.com/chlde/p/2967030.html
Copyright © 2011-2022 走看看