js--事件概念和事件监听

事件概念和事件监听

事件的概念

JavaScript使我们有能力创建动态页面,网页中的每个元素都可以产生某些可以触发JavaScript函数的事件。我们可以认为事件是可以被JavaScript侦测到的一种行为。

使用返回值改变HTML元素的默认行为

HTML元素大都包含了自己的默认行为,例如:超链接、提交按钮等。我们可以通过在绑定事件中加上return false来阻止它的默认行为

1.绑定HTML元素属性


<input type="button" value="clickMe" onClick="check(this)">

2.绑定DOM对象属性


document.getElementById(“btn1”).onClick=test;//test函数名

<html>
    <head>
        <title>00</title>
        <script type="text/javascript" charset="utf-8">

            function test1(){
                alert("绑定HTML元素属性");
            }

            function test2(){
                alert("绑定DOM对象属性");
            }

        </script>
    </head>
    <body>

        <a href="http://www.baidu.com" οnclick="return false">点击我</a>
        <input type="button" value="测试1" id="mytest1" οnclick="test1()"/>
        <button type="button" id="test2"><b>测试2</b></button>

        <script type="text/javascript">
            document.getElementById("test2").οnclick=test2;
        </script>

    </body>

</html>

js处理事件流程--冒泡方法

javascript事件列表解说

      鼠标事件


onclick


单击鼠标左键触发


ondblclick


双击鼠标左键触发


onmousedown


单击任意一个鼠标按键时触发


onmouseout


鼠标指针移出一个元素边界时触发


onmousemove


鼠标在某个元素上移动时持续触发


onmouseup


松开鼠标任意一个按键时触发


onmouseover


鼠标指针移到一个元素上时触发

原文地址:https://www.cnblogs.com/layuechuquwan/p/11183227.html

时间: 2024-10-10 01:04:50

js--事件概念和事件监听的相关文章

jQuery封装自定义事件--valuechange(动态的监听input,textarea)之前值,之后值的变化

jQuery封装自定义事件--valuechange(动态的监听input,textarea)之前值,之后值的变化 js监听输入框值的即时变化 网上有很多关于 onpropertychange.oninput的讲解,但是他们都不是我想要的,我想要的是动态的监听input,textarea等之前值和之后改变的值,比如像KISSY中的valuechange事件一样,当我在输入框里面开始输入1的时候,那么之前值是undefined,现在的值是1,当我接着输入2时候,那么之前的值是1,现在的值是2.等,

Android 开发事件响应之基于监听的事件响应

Android 开发事件响应之基于监听的事件响应 本文将介绍Android 操作系统如何通过监听来实现对事件的响应. Android 开发事件响应之基于监听的事件响应 背景介绍 Android 开发事件响应类型 内部类 匿名内部类 外部类 直接绑定标签 总结 背景介绍 对于任何可视化开发来说,都会涉及到对控件的响应.我们通过举例:实现对Button 按钮的点击来讲解Android 里面对事件相应的办法. Android 开发事件响应类型 在Android 开发中,有两种方式可以对事件作出响应,分

libevent (三) 事件注册与循环监听

事件注册与循环监听 在libevent中为了监听某种事件的发生,设置事件触发后的回调函数,也就是说对该事件注册到当前的IO模型中. 事件注册 事件初始化 使用`event_new`函数来对事件进行初始化. typedef void (*event_callback_fn)(evutil_socket_t, short, void *);/* 回调函数 */ struct event *event_new(struct event_base *base, evutil_socket_t fd, s

SpringBoot | 第三十二章:事件的发布和监听

前言 今天去官网查看spring boot资料时,在特性中看见了系统的事件及监听章节.想想,spring的事件应该是在3.x版本就发布的功能了,并越来越完善,其为bean和bean之间的消息通信提供了支持.比如,我们可以在用户注册成功后,发送一份注册成功的邮件至用户邮箱或者发送短信.使用事件其实最大作用,应该还是为了业务解耦,毕竟用户注册成功后,注册服务的事情就做完了,只需要发布一个用户注册成功的事件,让其他监听了此事件的业务系统去做剩下的事件就好了.对于事件发布者而言,不需要关心谁监听了该事件

js鼠标滚轮上下滚动监听事件应用实例(跨浏览器,亲测)

最近做项目涉及到多个DIV切换效果,包括普通按钮点击切换和鼠标滚轮上下滚动切换等:其主要涉及到的内容就是鼠标滚轮上下切换的事件监听,此处是第一次接触到,故在此记录一下:也希望能帮到各位有需要的朋友. 以下为项目实例: $(function() { var count = $("#sysCount").val();    var isUp = false; // 初始化子系统模块    if (count > 6) {        $("#panel").cs

vue监听滚动事件,实现滚动监听

在vue中实现滚动监听和原生js无太大差异,下面是一个简单的demo,可在控制台查看结果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="https://unpkg

vue监听滚动事件,实现滚动监听(scroll滚动)

在vue中实现滚动监听和原生js无太大差异,下面是一个简单的demo,可在控制台查看结果 1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>Document</title> 7 <script type="text/javascript" src="

ExtJS 下拉框监听事件、日期选择器监听事件、实现动态给items添加删除数据

1.下拉框 下拉框选择时,触发事件的方法: 在 Ext.form.ComboBox 组件中新增 listeners 监听事件 基本写法为:  listeners{'事件',function(){处理方法}} listeners:{ select:{ fn:function(combo,record,index) { } } }   2.日期选择器 选择日期时,值发生变化,并且在失去焦点之前触发此事件,也就是说如果此日期组件的值发生变化,而焦点并没有失去,这个事件也就不会触发.解决方法: menu

Bootstrap学习js插件篇之滚动监听

1.滚动监听 案例 滚动监听插件可以根据滚动条的位置自动更新所对应的导航标记.Bootstrap中文网左侧就是一个滚动监听的例子. 代码段: [html] view plaincopy <nav id="navbar-example2" class="navbar navbar-default navbar-static" role="navigation"> <div class="navbar-header&quo

Bootstrap入门(二十六)JS插件3:滚动监听

很多时候我们在浏览一些网页的时候,导航条会根据我们浏览网页的进度而发生不同的变化,这种就是滚动监听. 你的顶栏导航,添加data-spy="scroll"到您想要刺探(最典型的是这将是该元素<body>).然后添加data-target任何引导的父元素的ID或类属性.nav的组件. 我们来写一个基本的实例 先引入CSS文件 <link href="bootstrap.min.css" rel="stylesheet"> 我