js事件命名为on+动词

1.onclick事件，点击鼠标时触发，ondbclick双击事件

<h1 onclick="this.innerHTML='点击后文本'">点击文本!</h1>
<h1 onclick="changetext(this)">点击文本!</h1>

<script>

    function changetext(id) {id.innerHTML="点击后文本";}

</script>
<button onclick="displayDate()">点这里</button>

<script>

    function displayDate(){document.getElementById("demo").innerHTML=Date();}

</script>

<p id="demo"></p>

2.onload和onunload事件，在用户进入或离开页面时触发

用于处理cookie，onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。

<body onload="checkCookies()">

<script>

function checkCookies(){

    if (navigator.cookieEnabled==true){alert("Cookies 可用");}

    else{alert("Cookies 不可用");}

}

</script>

3.onchange事件，在表单元素的值发生变化时触发

输入你的名字: <input type="text" id="text" onchange="myFunction()">

<p id=p>段落，值等于文本框输入的值</p>

<script>

function myFunction(){

    var x=document.getElementById("text").value;

    document.getElementById("p").innerHTML=x;

}

初始文本框内容为空，当在文本框输入内容后回车、或者鼠标离开文本框时，段落p的内容同时修改为在文本框中输入的值

4.onmouseover、onmouseout、onmouseleave事件，鼠标移至、移出、离开元素时触发

<div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:red;width:150px;height:20px;padding:20px;">mouse test</div>

<script>

    function mOver(obj){obj.innerHTML="mouse over me"}

    function mOut(obj){obj.innerHTML="mouse out me"}

</script>

初始显示如下，当鼠标移至红色框上面，内容变为mouse over me，当鼠标移出时内容变为mouse out me

5.onmousedown和onmouseup事件

点击鼠标时触发onmousedown事件，释放鼠标按钮时触发onmouseup事件，整个过程触发onclick事件

<button onmousedown='mousedown()' onmouseup='mouseup()' onclick='mouseclick()' >点我</button>

<script>

    function mousedown(){document.getElementById('p1').innerHTML=Date()}

    function mouseup(){document.getElementById('p2').innerHTML=Date()}

    function mouseclick(){document.getElementById("p3").innerHTML=Date()}

</script>

<p id='p1'>p1</p>

<p id='p2'>p2</p>

<p id='p3'>p3</p>

点击鼠标稍后松开，可看见时间的不同。

6.onfocus事件，当输入框获得焦点时触发，onblur失去焦点时触发

输入你的名字: <input type="text" onfocus="myFunction(this)">

<script>

    function myFunction(x){x.style.background="gray";}

</script>

当鼠标定在文本框时，文本框背景变为灰色

7.onselect事件，被选中时触发

8.onsubmit事件，确认按钮被点击时触发

submit按钮被点击时会触发onsubmit事件，即使不绑定onsubmit事件也会默认向后台传递参数，onsubmit事件应该被绑定到form表单上而不是submit按钮上。

在form的事件中，提交参数这一步是最后进行的，可在提交之前通过onsubmit事件进行验证，返回false则停止向后台传递参数。

<form  id="form" onsubmit="mySubmit()">

    <input type="text" name="text">

    <input type="submit" value="提交">

</form>

<script>

    function mySubmit() {alert('hello');}

</script>

最初打开页面如下

在输入框输入123456，点击提交按钮，弹出提示框

点击提示框的确认，输入框内容被清空，并和输入框的name即text组成键值对被传递给后台url

组织form表单向后台传递参数，有两种方式

①onsubmit事件返回false；②使用event事件。这两种情况下，在文本框输入内容并点击提交后，不会将text和输入的值组成键值对传递给url，也不会清空输入框。

<form action="" id="form">

    <input type="text" name="text">

    <input type="submit" value="提交">

</form>

<script>

    var ele=document.getElementById('form');

    ele.onsubmit=function(){

        return false;}

</script>
<form action="" id="form">

    <input type="text" name="text">

    <input type="submit" value="提交">

</form>

<script>

    var ele=document.getElementById('form');

    ele.onsubmit=function(e){

        e.preventDefault();}

</script>

9.计时事件，window.setInterval()和window.setTimeout()，前面的window都可以省略

setInterval("javascript function",milliseconds)：间隔指定的毫秒数不停地执行指定函数

clearInterval(var)，停止上述setInterval()方法，要使用clearInterval()，需要在创建计时方法时创建一个全局变量，并将该变量传入给clearInterval()方法

<body>

    <p id="demo"></p>

    <input type="button" value='停止' onclick="myClick()">

</body>

<script>

    function myTime(){

        var date =new Date();

        var time=date.toLocaleTimeString();

        document.getElementById('demo').innerHTML=time;}

    var t=setInterval(function(){myTime()},1000)  //创建计时事件，每1s中执行一次，并赋值给全局变量

    //var t=setInterval(myTime,1000) ，简写方式

    function myClick()

        {clearInterval(t)}  //停止计时

</script>

显示当前时间，每1s刷新一次，直到点击停止按钮时间不再变化

setTimeout("javascript function",milliseconds)：在指定的毫秒数之后执行指定函数

clearTimeout()：停止上述setTimeout()方法的，要使用clearTimeout()，需要在创建超时方法时创建一个全局变量，并将该变量传入给clearInterval()方法

<p>点击第一个按钮等待3秒后出现"Hello"弹框</p>

<p>点击第二个按钮来阻止第一个函数运行（必须在3秒之前点击它）</p>

<button onclick="myFunction()">点我</button>

<button onclick="myStopFunction()">停止弹框</button>

<script>

var myVar;

function myFunction(){

    myVar=setTimeout(function(){alert("Hello")},3000);

}

function myStopFunction(){

    clearTimeout(myVar);

}

js DOM常见事件的更多相关文章

  1. DOM 常见事件

    onclick //当用户点击某个对象时调用的事件句柄. ondblclick //当用户双击某个对象时调用的事件句柄. onfocus //元素获得焦点. onblur //元素失去焦点. 应用场景 ...

  2. js中常见事件

    1.onblur:(使用在表单元素中,当元素失去焦点的时候执行) 2.onchange:(使用在表单元素中,当某些东西改变是执行) 3.onclick:(鼠标点击一个元素时执行) 4.ondblcli ...

  3. js自定义事件、DOM/伪DOM自定义事件

    一.说明.引言 我JS还是比较薄弱的,本文的内容属于边学边想边折腾的碎碎念,可能没什么条理,可能有表述不准确的地方,可能内容比较拗口生僻.如果您时间紧迫,或者JS造诣已深,至此您就可以点击右侧广告(木 ...

  4. 漫谈js自定义事件、DOM/伪DOM自定义事件

    一.说明.引言 我JS还是比较薄弱的,本文的内容属于边学边想边折腾的碎碎念,可能没什么条理,可能有表述不准确的地方,可能内容比较拗口生僻.如果您时间紧迫,或者JS造诣已深,至此您就可以点击右侧广告(木 ...

  5. js中 关于DOM的事件操作

    一.JavaScript的组成 JavaScript基础分为三个部分: ECMAScript:JavaScript的语法标准.包括变量.表达式.运算符.函数.if语句.for语句等. DOM:文档对象 ...

  6. DOM笔记（五）：JavaScript的常见事件和Ajax小结

    一.常见事件类型 1.鼠标事件 事件名称 说明 onclick 鼠标单击时触发 ondbclick 鼠标双击时触发 onmousedown 鼠标左键按下时触发 onmouseup 鼠标释放时触发 on ...

  7. DOM 以及JS中的事件

    [DOM树节点] DOM节点分为三大节点:元素节点,文本节点,属性节点. 文本节点,属性节点为元素节点的两个子节点通过getElment系列方法,可以去到元素节点 [查看节点] 1 document. ...

  8. 从零开始的JS生活（二）——BOM、DOM与JS中的事件

    上回书说道,JS中变量.运算符.分支结构.循环和嵌套循环等内容.本回就由本K给大伙唠唠JS中的BOM.DOM和事件. 一."花心大萝卜"--BOM 1.震惊,FFF团为何对BOM举 ...

  9. JS中的事件以及DOM 操作

    [DOM树节点] DOM节点分为三大节点:元素节点,文本节点,属性节点. 文本节点,属性节点为元素节点的两个子节点通过getElment系列方法,可以去到元素节点 [查看节点] 1 document. ...

随机推荐

  1. Dockerfile详解（二）

    Dockerfile文件详解 什么是dockerfile? Dockerfile是一个包含用于组合映像的命令的文本文档.可以使用在命令行中调用任何命令. Docker通过读取Dockerfile中的指 ...

  2. python tkinter Treeview 事件绑定

    def trefun(event): sels= event.widget.selection()#event.widget获取Treeview对象,调用selection获取选择对象名称 for i ...

  3. cocos2d JS-(JavaScript) 函数类型相互转换(字符串、整形、浮点形、布尔值)

    工作忙好些天了,近段时间抽点空分享一下自己学习JS的一点笔记心得做点记录,大神勿喷,谢谢! 1.字符串的转化 var found = false; console.log(found.toString ...

  4. 安装程序无法打开注册表项 UNKNOWN\Components\…的简单解决办法（转）

    安装程序无法打开注册表项 UNKNOWN\Components\…的简单解决办法 2018年04月16日 16:41:32 super_star_贤 阅读数:7193   在安装软件时(比如安装SQL ...

  5. ANTLR4权威指南 - 第5章 设计语法

    在第I部分,我们熟悉了ANTLR,并在一个比较高的层次上了解了语法以及语言程序.现在,我们将要放慢速度来学习下实现更实用任务的一些细节上的技巧,例如建立内部数据结构,提取信息,生成输入对应的翻译内容等 ...

  6. composer----------composer基本命令和遇到一些问题解决方案

    1.composer跟xdebug有冲突,每次用composer命令的时候都要报xdebug的错误,去php的配置文件里面将xdebug注释掉就可以了,但是我注释掉了以后还是不行.找了半天才看到,我用 ...

  7. LeetCode35.搜索插入位置

    给定一个排序数组和一个目标值,在数组中找到目标值,并返回其索引.如果目标值不存在于数组中,返回它将会被按顺序插入的位置. 你可以假设数组中无重复元素. 示例 1: 输入: [1,3,5,6], 5 输 ...

  8. yii2 rules验证规则，ajax验证手机号码是否唯一

    <?php namespace frontend\models; use Yii; use yii\base\Model; /** * Signup form */ class SignupFo ...

  9. Sql 嵌套循环

    DECLARE @i INT ,@j INT BEGIN PRINT 'satrt i:'+CAST(@i AS varchar) BEGIN PRINT 'j:'+CAST(@j AS varcha ...

  10. [openjudge-动态规划]摘花生

    题目描述 描述 Hello Kitty 想摘点花生送给她喜欢的米老鼠.她来到一片有网格状道路的矩形花生地(如下图),从西北角进去,东南角出来.地里每个道路的交叉点上都有种着一株花生苗,上面有若干颗花生 ...