[第六季]13.Javascript事件处理机制(二)

最新推荐文章于 2023-03-24 23:24:14 发布

原创最新推荐文章于 2023-03-24 23:24:14 发布 · 244 阅读

0 ·

CC 4.0 BY-SA版权

008 JavaScript 专栏收录该内容

14 篇文章

订阅专栏

本文介绍了JavaScript中不同方式的事件绑定方法，并演示了如何使用这些技术实现鼠标位置跟踪及Ctrl键状态检测功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

4.复习笔记(这个就是课后习题以及课程所呈现的需求)

①介绍第四种和第五种的function(alert)写法.
②编写鼠标位置的函数,并增加Ctrl检验的函数.

5.自测代码

2.课堂笔记

16:17分开始
(4)把函数写到外面
<script language="javascript">
    function show()
    {
        alert("这是一个命名函数!");
    }
    function bangding()
    {
        document.getElementsByTagName("input").item(0).onclick=show;

    }
</script>
</head>

<body onload="bangding();">
<input type="button" value="确定" />
</body>

本来是要在标签里面写onClick(),现在不用谢了,前面四种方法都是在说这个事情
2017年8月11日16:22:24
(5)直接在脚本中写,标签中不写任何东西
<script language="javascript">
    window.onload=function()
    {
        document.getElementsByTagName("input").item(0).onclick=function()
        {
            alert("这是一个比较复杂的例子!");
        };//这是一句话,所以后面要加分号,不然要报错
    }
</script>
</head>

<body>
<input type="button" value="确定" />
</body>
2017年8月11日16:24:24
(6)鼠标移动的时候在网页的左上角显示鼠标的具体位置
查看w3shool
实例
哪个鼠标按钮被点击？
光标的坐标是？
被按的按键的 unicode 是？
相对于屏幕，光标的坐标是？
shift 键被按了吗？
哪个元素被点击了？
哪个事件类型发生了？

<style type="text/css">
    #info
    {
        height:50px;
        width:200px;
        font-size:16px;
        background-color:#FCC;
    }
</style>
<script language="javascript">
    window.onmousemove=function(evt)
    {
        if(window.event) evt=window.event;
        document.getElementById("info").innerHTML=evt.screenX+":"+evt.screenY;
    };
</script>
</head>

<body>
<div id="info">

</div>
</body>
</html>
(7)在(6)的基础上增加ctrl键按下的检验
window.onmousemove=function(evt)
    {
        if(window.event) evt=window.event;
        document.getElementById("info").innerHTML=evt.screenX+":"+evt.screenY;
        if(evt.ctrlKey)
        {
            document.getElementById("info").innerHTML+=":Ctrl";
        }
    };
2017年8月11日17:01:30