js事件机制学习

事件是用来实现js和html之间交互的,可以用侦听器(或处理程序)来预订事件,以便事件发生时执行相应的代码。

这种在传统软件工程中被称为观察员模式的模型,支持页面的行为(js)与页面的外观(html和css)的松散耦合。

js的事件机制一:

                解释:当我们的行为动作满足了一定的条件后,会触发某类事务的执行。
                作用:主要是结合js的函数来使用。
                内容:
                    1、单双击事件
                        单击:onclick            当鼠标单击的时候会触发
                        双击:ondblclick        当鼠标双击的时候会被触发
                    2、鼠标事件
                        onmouseover            当鼠标悬停在某个HTML元素上的时候触发
                        onmousemove            当鼠标在某个HTML元素上移动的时候触发
                        onmouseout            当鼠标在某个HTML元素上移出的时候触发
                    3、键盘事件
                        onkeyup                当键盘在某个HTML元素上弹起的时候触发
                        onkeydown            当键盘在某个HTML元素上下压的时候触发
                    4、焦点事件
                        onfocus                当某个HTML元素获取焦点的时候触发
                        onblur                当某个HTML元素失去焦点的时候触发
                    5、页面加载事件            
                        onload                当页面加载成功后触发。
                注意:
                    js中添加事件的第一种方式:
                        在HTML上直接使用事件属性进行添加,属性值为所监听执行的函数。
                    js中的事件只有在当前HTML元素上有效。
                    一个HTML元素可以添加多个不同的事件。
                    一个事件可以监听触发多个函数的执行,但是不同的函数要使用分号间隔

js的事件机制学习二:

                1、给合适的HTML标签添加合适的事件
                    onchange----select下拉框
                    onload------body标签
                    单双击-------用户会进行点击动作的HTML元素
                    鼠标事件------用户会进行鼠标移动操作的。
                    键盘事件------用户会进行键盘操作的HTML元素。
                2、给HTML元素添加多个事件时,注意事件之间的冲突
                    举个栗子:单击和双击
                    当事件的触发条件包含相同部分的时候,会产生事件之间的冲突。
                3、事件的阻断
                    当事件所监听的函数的将返回值返回给事件时:
                        false:则会阻断当前事件所在的HTML标签的功能
                        true:则继续执行当前事件所在的HTML标签的功能
                4、超链接调用js函数
                    <a href="javascript:函数名()">调用js函数</a>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值