Javascript事件: 1事件源 2事件 3事件程序

这篇具有很好参考价值的文章主要介绍了Javascript事件: 1事件源 2事件 3事件程序。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

Javascript事件:   1事件源  2事件 3事件程序

Javascript是基于事件驱动的一种程序,所有的特效都是基于事件来进行触发的.  行为=事件+动作

一 事件源[任何一个html元素(节点),如body,div,button,p,a,h1……]

二 事件[用户操作]      on  + 事件

鼠标:

click           是在鼠标点击弹起之后触发的事件

dbclick

mouseover

mouseout

mousedown     onmousedown事件则是在鼠标按键按下去的瞬间触发的

mouseup       鼠标抬起     

mousemove     鼠标移动

         drag           按住鼠标拖动

      键盘:

  Keypress 键盘事件

Keyup   抬起

Keydown 按下

文档:

load  加载 onload

unload 关闭

beforeunload 关闭之前

     表单:  

         focus  获取焦点事件

         blur   失去焦点事件

         例如: οnfοcus="this.value=''" οnblur="this.value='please input username'"

submit  提交事件  <input type=submit   value=”” />

         change  改变事件  当控件内容改变时用到,例如  <select></select>

     其它:

        Scroll   滚动事件

        Selected  选择事件

        Selectstart  

        Contextmenu 禁止右键

 …….

有三种方法加事件:

      第一种:

           <tag  on事件=”事件处理程序” >……..</tag>  

// 事件处理程序可以是一个函数

<div οnclick=pra()></div>

  第二种:

<script>

        事件源.on事件=事件处理程序

        div.οnclick=function() {//程序源码 }

</script>

        

第三种:  (了解即可)

   <script for=”事件源ID”  event=”事件”>事件处理程序</script>

          :一个事件源上可以加多个事件

三 事件处理程序(事件发生后的处理程序)(略)

event.altKey、event.ctrlKey、event.shiftKey 属性

HTML DOM

event.altKey

语法:event.altKey

取值:true | false / 1|0

说明:

altKey属性为true表示事件发生时Alt键被按下并保持,为false则Alt键没有按下。 
altKey属性可结合鼠标或键盘使用,多用于制作一些快捷操作方式。 
 
event.ctrlKey 
功能:检测事件发生时Ctrl键是否被按住了。

语法:event.ctrlKey

取值:true | false  1|0

说明:

ctrlKey属性为true表示事件发生时Ctrl键被按下并保持,为false则Ctrl键没有按下。 
ctrlKey属性可结合鼠标或键盘使用,多用于制作一些快捷操作方式。 
 
event.shiftKey 
功能:检测事件发生时Shift键是否被按住了。

语法:event.shiftKey

取值:true | false  1|0

说明:

shiftKey属性为true表示事件发生时Shift键被按下并保持,为false则Shift键没有按下。 
shiftKey属性可结合鼠标或键盘使用,多用于制作一些快捷操作方式。 
 
 实例1 :组合操作示例

<input id="txt1" type="text" value="Hello World!" οnclick="checkAlt(event)" />

<script type="text/javascript">

function checkAlt(oEvent)

{

  if( oEvent.altKey )

    document.getElementById("txt1").select();

}

</script>

 

这段代码的效果为: 如果按住Alt键再单击上面的文本框,可以选中文本框中的文本。

 
 实例2 :组合操作示例

<input id="txt2" type="text" value="Hello World!" οnclick="clearText(event)" />

<script type="text/javascript">

function clearText(oEvent)

{

  if( oEvent.ctrlKey && oEvent.keyCode==46 )

    document.getElementById("txt2").value = "";

}

</script>

这段代码的效果为: 使用"Ctrl+Del"组合键可清除上面的文本框的内容。(必须先使文本框获得焦点。本例只适用于IE浏览器。)

 
 实例3 :组合操作示例

<div id="box" style="width:50px; height:25px;border:1px solid black; background-color:red" οnclick="setColor(event)"></div>

<script type="text/javascript">

var b = true;

function setColor(oEvent)

{

  if( oEvent.shiftKey && b )

    document.getElementById("box").style.backgroundColor = "blue";

  if( oEvent.shiftKey && !b )

    document.getElementById("box").style.backgroundColor = "red";

  b = !b;

}

</script>

这段代码的效果为:按住"Shift"键并用鼠标点击上面的色块,可改变色块颜色

   文章来源地址https://www.toymoban.com/news/detail-473089.html

到了这里,关于Javascript事件: 1事件源 2事件 3事件程序的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【12JavaScript 事件】掌握JavaScript事件:详细教程、实例演示,打造交互动感网页!

    JavaScript事件是指页面或元素上发生的交互动作,例如点击按钮、鼠标移动、键盘输入等。了解和处理事件是构建交互式Web应用程序的重要基础。本教程将详细介绍JavaScript事件的基本概念、事件处理程序、事件类型以及常见的事件用法。 事件处理程序是处理事件的函数,它会

    2024年02月08日
    浏览(68)
  • 【JavaScript】事件监听:表单事件(下篇)

    目录 八、keydown: 当用户按下键盘上的任意键时触发。 九、keyup: 当用户释放键盘上的键时触发。 十、keypress: 当用户按下键盘上的字符键时触发。 十一、focusin: 当表单元素或其子元素获得焦点时触发。 十二、focusout: 当表单元素或其子元素失去焦点时触发。 十三、cut: 当用户

    2024年01月24日
    浏览(44)
  • JavaScript中的事件冒泡和事件捕获机制

    JavaScript中的事件冒泡和事件捕获机制是开发中非常重要的概念,掌握了这两种机制,可以更好地理解事件处理和DOM操作。本文将深入探讨JavaScript中的事件冒泡和事件捕获机制,包括它们的工作原理、如何使用它们、以及它们的优缺点。 一、什么是事件冒泡和事件捕获机制?

    2024年02月03日
    浏览(44)
  • 深入理解JavaScript的事件冒泡与事件捕获

    JavaScript中提供了很多操作DOM的API。 事件冒泡 和 事件捕获 是指浏览器中处理DOM元素上事件的两种不同方式。事件冒泡和事件捕获都是 JavaScript事件模型 中的一部分,可以用来 处理事件 。 对于这个问题,在实际开发中,并不是非常重要,因为在工作中我们基本上不会直接操

    2024年02月10日
    浏览(54)
  • JavaScript事件流:深入理解事件处理和传播机制

    JavaScript中的事件流是一种机制,用于描述和处理事件在DOM树中的传播过程。了解事件流的属性和工作原理对于编写高效的事件处理代码和实现复杂的交互功能至关重要。本文将详细介绍JavaScript事件流的发展流程、属性以及应用场景,并提供一些代码示例和引用资料,帮助读

    2024年02月08日
    浏览(52)
  • 【JavaScript-13】阻止事件的默认行为+键盘表单事件

    一、阻止默认行为 1.阻止事件冒泡 event.stopPropagation(); a标签不跳转:href=“javascript:;” 2.阻止默认行为 event.preventDefault();通常写在第一行 例子: 例1)如a标签不需要写onclick直接点击便可以跳转,此处写阻止默认行为,就是阻止a的点击行为 例2)阻止默认行为,阻止右击页面自

    2024年02月09日
    浏览(49)
  • js的鼠标事件(JavaScript的鼠标事件,vue的鼠标事件)

    js鼠标事件,相关属性: vue鼠标事件,相关属性 (js鼠标事件和vue中的鼠标事件区别是省略了on字符):

    2024年02月12日
    浏览(46)
  • 从0开始学习JavaScript--JavaScript事件:响应与交互

    JavaScript的事件处理是Web开发中至关重要的一部分,通过事件,能够实现用户与页面的互动,使得网页更加生动和交互性。本文将深入探讨JavaScript事件的各个方面,包括事件的基本概念、事件类型、事件对象、事件冒泡与捕获、事件委托、以及一些高级的事件处理技巧。 在

    2024年02月02日
    浏览(48)
  • Javascript怎样阻止事件传播?

    在 JavaScript 中,可以使用事件对象的方法来阻止事件传播。事件传播指的是当一个元素上触发了一个事件,该事件会在事件流中传播到父元素或祖先元素,从而影响到它们。 事件传播有三个阶段:捕获阶段、目标阶段和冒泡阶段。阻止事件传播的方法取决于你希望在哪个阶段

    2024年02月13日
    浏览(31)
  • JavaScript的事件监听

    Web页面需要经常和用户之间进行交互,而交互的过程中我们可能想要捕捉这个交互的过程: 比如 用户点击了某个按钮 、 用户在输入框里面输入了某个文本 、 用户鼠标经过了某个位置 ; 浏览器需要搭建一条 JavaScript代码和事件之间的桥梁 ; 当某个事件发生时,让JavaScrip

    2024年02月04日
    浏览(40)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包