js中的事件添加和程序

事件的基本使用方式:

事件源.事件类型 = function(){事件触发后的操作};

点击事件:click;

在js中点击事件使用时前面要加on,为onclick;

例:点击btn按钮给box添加样式;

btn.onclick = funciton(){

  box.style.width = ‘100px‘;

  box.style.height = ‘100px‘;

  box.style.backgroundColor = ‘red‘;

};

移入移出事件

mouseover :鼠标移入事件;

box.onmouseover = function(){

  this.style.backgroundColor = ‘blue‘;

}

mouseout :鼠标移出事件;

box.onmouseout = function(){

  this.style.backgroundColor = ‘red‘;

}

小例题;

  点击按钮实现页面变色的效果;

1、首先获取元素 btn 按钮 ;

2、事件绑定 btn.onclick = funciton(){};

3、在{}中写事件驱动程序;

  var btn = document.getElementById(‘btn‘);

  var flag = true;  //为了实现上述效果我们采用一种简便方式;开闭原则;

  btn.onclick = function (){

    if(flag){//由于上面已经给flag赋值了true;所以此次判断可以进入;

      dcoument.body.className = ‘black‘;//给body赋值白色;

      btn.innerText = ‘变成白色‘;//给变按钮的内容;

      flag = false;//将flag设为false;让下次点击不能进入if循环,只能进入else;

    }else{

      document.body.className = ‘white‘;

      btn.innerText = ‘变成黑色‘;

      flag = true;//当页面设置为黑色时 给flag设置为true;让下次点击不能进入

            else只能进入if循环;

    }

  }

原文地址:https://www.cnblogs.com/qiweile/p/9287079.html

时间: 2024-08-30 15:11:50

js中的事件添加和程序的相关文章

js中鼠标事件总结

js中鼠标事件主要有onclick,onmousedown,onmouseup,oncontextmenu,ondblclick,所有的这些事件都包含有一个事件对象event,当然在IE低版本下,event对象是挂在window底下的.这个我们另行讨论. 1.通过html添加事件 <input type="button" click="alert(1)"/> 2.通过DOM0级方式添加事件 <input type="button"

从零开始的JS生活(二)——BOM、DOM与JS中的事件

上回书说道,JS中变量.运算符.分支结构.循环和嵌套循环等内容.本回就由本K给大伙唠唠JS中的BOM.DOM和事件. 一."花心大萝卜"--BOM 1.震惊,FFF团为何对BOM举起了火把--BOM简介 BOM(Browser Object Model) 是指浏览器对象模型,在JS中BOM是个不折不扣的花心大萝卜,因为它有很多个对象,其中代表浏览器窗口的Window对象是BOM的"正室".也就是最重要的,其他对象都是正室的下手.或者叫侧室也不足为过. 2.细数BOM

JS基础--函数与BOM、DOM操作、JS中的事件以及内置对象

   前   言 絮叨絮叨 这里是JS基础知识集中讲解的第三篇,也是最后一篇,三篇JS的基础,大多是知识的罗列,并没有涉及更难得东西,干货满满!看完这一篇后,相信许多正在像我一样正处于初级阶段的同学,经过初步的学习,会对这一门语言有了一定深入的了解,也会感受到这一门语言的强大之处.希望各位同学通过一定的学习,会得到等大的收获. 因为是最后一篇所以内容可能有点多,希望各位同学能够慢慢看,细细看,让我们一起学习,一起进步,一起感受JS的魅力. 一函数 函数的声明及调用 1.函数的声明格式: func

JS中的事件以及DOM 操作

[DOM树节点] DOM节点分为三大节点:元素节点,文本节点,属性节点. 文本节点,属性节点为元素节点的两个子节点通过getElment系列方法,可以去到元素节点 [查看节点] 1 document.getElementById("div1")  通过ID获取唯一的节点  多个同名ID只会取到第一个 2 getElmentsName   通过Name取到一个数组,包含1到多个节点   使用方式   通过循环,取到每一个节点  循环次数从0开始,<数组 length [查看和设置属

JS中的事件冒泡(Bubble)和事件捕获(capture)以及如何阻止事件的冒泡

对“捕获”和“冒泡”这两个概念,通常我们对冒泡了解和使用的会更多一些,因为在我们使用的所有浏览器中,都支持事件冒泡 ,即事件由子元素向祖先元素传播的,就 像气泡从水底向水面上浮一样.而在像firefox,chrome,safari这类所谓的标准浏览器中,事件传播通常是有三个阶段的:事件捕获阶段,事 件目标阶段,事件冒泡阶段,这三者的执行的顺序是先捕获在冒泡.对于捕获阶段,这个很少 有用武之地,所以被人疏忽遗忘也在所难免了,不常用不代表它不存在,本着科学严谨的态度,我们有必要去看一下它的庐山真面目

DOM 以及JS中的事件

[DOM树节点] DOM节点分为三大节点:元素节点,文本节点,属性节点. 文本节点,属性节点为元素节点的两个子节点通过getElment系列方法,可以去到元素节点 [查看节点] 1 document.getElementById("div1")  通过ID获取唯一的节点  多个同名ID只会取到第一个 2 getElmentsName   通过Name取到一个数组,包含1到多个节点   使用方式   通过循环,取到每一个节点  循环次数从0开始,<数组 length [查看和设置属

JS学习五(js中的事件)

[JS中的事件分类] 1.鼠标事件 click/bdlclick/onmouseover/onmouseout 2. HTML事件 onload/onscroll/onsubmit/onchange/onfocus 3. 键盘事件 keydown:键盘按下时触发 keypress:键盘按下并松开时的瞬间触发 keyup:键盘抬起时触发 [注意事项] ①执行顺序:keydown-->keypress-->keyup ②当长按时,会循环执行keydown-->keypress ③有keydo

JS中的事件传播流程

JS中的事件传播流程 1,Javascript与HTML之间的交互是通过事件实现的. 事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间. 可以使用侦听器来预定事件,以便事件发生时执行相应代码. 2,DOM事件流存在三个阶段:事件捕获阶段,处于目标阶段,事件冒泡阶段. 事件流:事件发生时,事件在元素节点与根节点之间的顺序传播,路径所经过的所有节点都会收到该事件,这个传播过程即DOM事件流.事件传播顺序的两种事件流模型:事件冒泡,事件捕获. 事件捕获(event capturing):事件从最不

js中的事件,内置对象,正则表达式

[JS中的事件分类] 1.鼠标事件: click/dbclick/mouseover/mouseout/mousemove/mousedown/mouseup 2.键盘事件: keydown: 键盘按下去触发 keypress: 键盘按下并松开的瞬间触发 keyup: 键盘抬起时触发 [注意事项:(了解)] ① 执行顺序: keydown--keypress--keyup ② 长按时,会循环不断的执行keydown-keypress ③ 有keydown事件,不一定有keyup事件(事件触发过程