js函数之事件

最新推荐文章于 2024-09-16 17:42:02 发布
最新推荐文章于 2024-09-16 17:42:02 发布
阅读量223 收藏 2
点赞数
原文链接：https://juejin.im/post/5d4ead14e51d453b1e478a87
版权

事件概念及三要素

事件：即用户在页面上的操作，如：点击鼠标、敲打键盘、鼠标移动...
事件三要素：

     1、事件源：事件是谁触发？
     2、事件名称：什么事件？
     3、事件处理程序：触发后做什么？
复制代码

事件的三种写法:

1、写 在标签上，on事件名=“函数调用”，单做标签的属性；  
2、标签.onclick=匿名函数；  
3、标签.onclick=函数名 
复制代码
<body>
    <input type="button" value="按钮" onclick="dian()" id="btn">
</body>
复制代码

第一种

   function dian(){
       alert("点击了按钮");
   }
复制代码

第二种

    btn.onclick = function(){
        alert("点击了按钮")
    }
复制代码

第三种

    function cc(){
        alert("点击了按钮")
    }
    btn.onclick = cc;
复制代码

事件的类型

鼠标单击 click

btn.onclick=function(){
    alert("单击鼠标")
}
复制代码

鼠标双击 dblclick

btn.ondblclick=function(){
    alert("双击了鼠标")
}
复制代码

鼠标放上去 mouseover

btn.onmouseover=function(){
    alert("鼠标滑过")
}
复制代码

鼠标离开 mouseout

btn.onmouseout=function(){
    alert("鼠标离开")
}
复制代码

键盘按下去 keydown

window.onkeydown=function(){
    alert("键盘按下了")
}
复制代码

键盘弹起 keyup

window.onkeyup=function(){
    alert("键盘弹起了")
}
复制代码

加载事件 load
当网页中所有内容都加载完成之后，再加载自己的内容

<script>
window.onload=function(){
    btn.ondblclick=function(){
        alert("双击了鼠标")
    }
}
</script>
<body>
<input type="button" value="按钮" onclick="dian()" id="btn">
</body>
复制代码

针对于表单的

<form action="http://www.baidu.com" id="f">
            姓名：<input type="text" id="username">
            <br>
            <input type="submit">
复制代码

表单提交 表单名.submit

window.onkeydown=function(){
    f.submit()
}
复制代码
f.onsubmit=function(){
    alert("表单即将提交");
}
复制代码

获取焦点 focus

username.onfocus = function(){
    alert("鼠标点到了文本框里面")
}
复制代码

失去焦点 blur

username.onblur = function(){
    alert("鼠标离开了文本框")
}
复制代码

内容改变了 change

username.onchange = function(){
    alert("内容发生了改变")
}
复制代码

转载于:https://juejin.im/post/5d4ead14e51d453b1e478a87

weixin_30527551
关注
JavaScript—事件函数
Always-Learning
11-30 581
汇总表格 函数名 作用 onmousemove 检测鼠标是否移动 clientX 鼠标的X坐标 clientY 鼠标的Y坐标 pageX 相对于当前页面的X坐标 pageY 相对于当前页面的Y坐标 事件对象 当事件的响应函数被触发时，浏览器每次都会将一个事件对象作为实参，传递进响应函数，在事件对象中封装了当前对象的一切信息，比如：鼠标的坐标，当前键盘按下了那个键，鼠标滚动的方向等等。 发十多个的故事死递归 事件冒泡 什么是事件冒泡？ 所谓的事件冒泡，指的是触发了内部事件
JavaScript学习笔记之JS函数
11-27
函数就是包裹在花括号中的代码块，前面使用了关键词function： 复制代码 代码如下: function functionName() {  这里是要执行的代码 } 函数参数 　函数的参数可以任意多个，不用声明变量类型，只用给出变量名： ...
JS的事件函数
博客
04-27 1088
<h1 id="demo">Mouse over me</h1> <script> document.getElementById("demo").onmouseenter = function() {mouseEnter()}; document.getElementById("demo").onmouseleave = function() {mouseL...
JavaScript 事件处理
最新发布
qq_72013756的博客
09-16 1458
从零开始学前端
js 事件函数
哈哈绝的博客
10-26 1210
js事件函数 鼠标事件函数、键盘事件函数、表单事件函数、窗口事件函数 keydown 键盘按键按下事件，大小写切换的按键，在中文状态下是不会触发该事件的 keyup 键盘按键抬起事件，在键入中文的时候，该事件的evt.key的值为 Process
JavaScript函数事件
Z_2010317的博客
08-08 341
event.stopPropagation() 阻止事件传播，但此方法对于早期的IE浏览器并不起作用。reset重置事件 submit提交事件:这两个事件必须在form表单中才能使用。3、触发以后做什么:事件处理函数。第一种方式:将前面的事件进行覆盖。2、事件目标阶段:最开始选择的那。2、触发的什么事件:事件类型。1、事件捕获阶段，从外向内。3、事件冒泡阶段，从里向外。1、触发谁的事件:事件源。...
js函数中的事件
wyqwilliam的博客
12-12 191
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>js的事件机制</title> <script type="text/javascript"> // function testonclick(){ // alert("我...
怎么通过onclick事件获取js函数返回值（代码少）
10-23
接下来，我将详细介绍如何通过onclick事件获取JavaScript函数返回值。 首先，创建一个按钮元素，并为其绑定点击事件处理器是实现该功能的基本步骤。在上述的代码示例中，我们看到`createBtn`函数用于动态创建按钮，...
JS 事件绑定函数代码
12-11
主要解决了 浏览器兼容，现在可以兼容IE6 7 8 FF 谷歌（废话） IE浏览器里，this指向问题。 直接上代码吧！ 代码如下: var bind=function(object,type,fn){ if(object.attachEvent){//IE浏览器 object.attachEvent...
js运动事件函数详解
12-29
本文实例为大家分享了js运动事件函数，供大家参考，具体内容如下 HTML <h2 class=title>The Dog <p class=describe>Split between cat,belong to the cat family,cat,cat,is the world's more widely in the ...
JavaScript函数获取事件源的小例子
12-10
代码如下: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” ... <head> <... charset=utf-8″ /> <...js函数中获取事件源</title> <script type=”text/javasc
JS中的 函数、事件和对象
08-31
javascript中经常用到的函数、事件和对象
javascript 函数 事件
努力努力再努力的博客
03-19 93
function draw() { //定义函数 } myButton.onclick = function() { alert('hello'); //匿名函数通常来运行负载的代码以响应事件触发 } draw();//调用函数 每个可用的事件都会有一个事件处理器，也就是事件触发时会运行的代码块。当我们定义了一个用来回应事件被激发的代码块的时候，我们说我们注册了一个事件处理器。注意事件处理器有时候被叫做事件监听器。 监听器留意事件是否发生，然后处理器就是对事件发生做出的回应。 有时候在
JavaScript事件函数
weixin_43915557的博客
10-20 216
事件函数 作用 主要用于和用户产生指定的交互，提高页面或程序的交互性。 当用户执行的操作触发事件函数的时候，会执行指定的函数。 常见鼠标的事件 名称 作用 onclick 鼠标单击 ondblclick 鼠标双击（必须连续点击两下） onmouseover 鼠标移入，即鼠标停留在图片(元素)等的上方（一次） onmouseout 鼠标移出，即离开(元素)图片等所在的区域（一次） onmousemove 鼠标移动，即鼠标在(元素)图片的上方不断移动（多次） onmouseu
JavaScript中常见的事件函数
halo1416的博客
09-18 3623
js的事件在实际项目中是用的非常多的，今天，总结一下基本并且常用的事件函数： 1. 鼠标事件：             onclick: 点击事件             ondblclick: 双击事件                          onmouseover: 鼠标进入“某对象区域”             onmouseout: 鼠标离开“某对象区域”           ...
JavaScript函数与事件
略懂一点的少年的博客
05-15 301
函数：将一段特定的功能所包含的代码进行包装，放入一个代码块，方便调用，这种代码块就叫做函数。（JS中的函数类似于C# 中的方法） 一，JavaScript自定义函数 1，语法： function 函数名（形参1，形参2，……）{ 语句 } 2，定义函数的规则 1）使用function关键字（function的中文意思就是功能） 2）函数名后面（）放入参数，也可以不放 3）{}大括号用来放入特定功能的若干语句 4）函数的命名规则和变量的命名规则相同 3，函数的调用 1）函数不会自己调用，需要用到**函数名（参
JS事件处理函数
不会code
09-22 2525
(a) ele.onxxx = function(event){} 兼容性好，同一个元素的同一个事件上绑定一次，基本等同于卸载HTML行间 this指向DOM元素 (b) obj.addEventListener(事件类型，处理函数，false) 同一个对象同一个事件绑定多个处理函数 this指向dom元素 IE9
Js事件和函数
kkxxzx的博客
10-30 519
JavaScript函数和事件 系统自带函数 isNaN()检查数值算法为数字，返回true|false,字符返回true,数字返回flase,根据值来判断是否为数字，不会根据数据类型来判断 eval();将字符串中的代码运行 script> var a = 5; //true document.write(isN
js事件函数绑定
梓晨博客
04-10 354
js事件函数绑定 <html> <head> <title></title> </head> <body> <button id="btn">点击我啊</button> <script type="text/javascript"> function fu(){ ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值