关于Javascipt基础7

最近练习了关于事件的代码,所以就说说js的事件吧。

一、什么是事件?

  JavaScript和HTML之间的交互是通过用户和浏览器操作页面时引发的事件来理的。

  比如页面载入完成时, 会触发一个事件。再比如用户点击按钮时,点击也是一个事件。

常用的事件有:

  PC端上常用的事件:

    click 鼠标点击

    mousedown 鼠标按下

    mouseup 鼠标弹起

    mousemove 鼠标移动

    mouseout 鼠标离开

    change文本域的内容被改变

    dblclick 鼠标双击

    focus 获得焦点

    load 加载完成

二、怎样将事情处理程序绑定到特定的事件中?

   方法1: 使用HTML标记创建事件处理程序

    例:给图片添加点击事件 <img src=“01.jpg” onclick="alert(this.src);"/>

   方法2:addEventListener() 方法用于向指定元素添加事件句柄

    语法: object.addEventListener(EventName,eventHandler);

     例:给document对象添加点击事件 document.addEventListener("click",function(){ alert("你干嘛点我!"); })

  

  方法3:在js代码中获取对象,然后设置对应对象事件的匿名函数

    例:var a=document.getElementById(‘a‘);

      a.onclick=function() {

        alert(‘hello world‘);

      }

此外,利用for循环可以把事件都附加上一组元素当中

  例:var lis=document.getElementsByTagName(‘li‘);

    for(var i = 0; i < lis.length; i++){

      lis[i].onclick= function() {

        alert(lis[i]);
      }

    }

等等,怎么弹出来的结果跟想象中的不一样?

这是因为当你点击li,触发事件中的for已经循环完毕了,i==lis.length,所以lis[i]的结果不正确。

  应当改为:var lis=document.getElementsByTagName(‘li‘);

       for(var i = 0; i < lis.length; i++){

        lis[i].onclick= function() {

          alert(this);
        }

      }

this的意思是使用这个函数的对象。

时间: 2024-10-14 10:38:33

关于Javascipt基础7的相关文章

关于Javascipt基础1

Javascipt是一种脚本语言,由web浏览器进行解释和执行. 将Javascript应用到网页中的方式有两个 一是将javascript代码插入html文档的<script>标签中 二是将javascript代码存放在一个独立的文件里,再用<script>标签的src属性指向该文件使用. javaScript 语法概念 一.变量 变量由 var 运算符加变量名定义.(var是声明变量) 例如:var age = 25(声明age这个变量 赋予25这个数值)  var mood

关于Javascipt基础3

今天终于来到我们的循环语句了:-D 1.While(较少用的循环语句) 语法: while (exp) { //statements; } 说明: while (变量<=结束值) { 需执行的代码 } 例子: var i = 1; while(i < 3){ alert(i); i++; }(切记要在执行代码中加入能够跳出循环的条件 不然会无限循环. PS:我犯过很多回 包括今天= =) 2. Do…while do { //statements; }while (condition); do

关于Javascipt基础2

承接上篇的随笔 下面的内容是关于逻辑思维的 与编程语言的大致一样 四.运算符 1.算术运算符( + - * / %) 加.减.乘.除.求余,其中%是求余运算 例子:var total = (1 + 4) * 5;  var i = 100;  var temp = (i – 20) / 2;  alert(“10”+ 20) //return 1020;  alert(10 + 20) //return 30; 2. 后增量/后减量运算符 ++ ,-- 例子:var i = 10;  var a

关于Javascipt基础6

这次主要说DOM 文档对象模型 DOM (document object model) 文档对象模型,它定义了操作文档对象的接口. DOM 把一份html文档表示为一棵家谱树,使用parent(父), child(子), sibling(兄弟)等记号 来表明家庭成员之间的关系. 一.节点 节点(node) 一词来自于网络理论,这代表着网络中一个个的连接点,网络是由节点构成的. 对于html文档也是一样,文档是由节点构成的集合. 1.元素节点 元素节点如 <body> <p> <

关于Javascipt基础5

紧接着上次的各种对象. String 对象 String 对象用来处理文本. 事实上任何一个字符串常量都是一个String对象,可以将其直接作为对象来使用. 获得字符串长度: 1.length属性 var str = “hello”; var str2 = “你好”; alert(str.length); //输出 5 alert(str2.length); //输出2 提取字符串: 1.charAt()方法 var str = "HELLO WORLD"; var n = str.c

关于Javascipt基础4

这次说说函数和一部分对象. 函数 函数就是完成某个功能的一组语句,函数由关键字 function + 函数名 + 一组参数定义; 函数在定义后可以被重复调用,通常将常用的功能写成一个函数,利用函数可以使代码的组织,结构更多清晰. 基本语法: function funName (arg0, arg1, … argN){ //statements }(组成函数必要的是function, 函数名,(),{}.()里面可以没有参数.) 例1: function say_hello (name, msg)

javascipt——基础知识——对象类型

1.object:是javascript的所有对象的父对象. 例:var a={}; 与 var a=new Object();的作用相同,均是创建一个空对象. 2.Array 构造函数: new Array();new Array(size);new Array(element0, element1, ..., elementn); 例:var a=new Array(1);a[0]; //undefined; 在初始化时,指定其长度为n,由于尚未指定数组内容,因此获取时只能是undefine

javascipt——基础知识——基本数据类型

javascript的数据类型分为基本数据类型和非基本数据类型(对象) 一.基本数据类型: 包括以下部分:数字.字符串.布尔值.undefined.null,除此之外的均为对象 1.数字:浮点数.整数: 八进制:0开头,例:a=011; parseInt(a); //9 十六进制:0x开头,例:a=0x11; parseInt(a); //17 指数形式:数字e数字,例:a=3e2; parseInt(a); //300 Infinity:超出javascript处理范围的最大值.例:a=1e1

20145301赵嘉鑫《网络对抗》Exp8 Web基础

20145301赵嘉鑫<网络对抗>Exp8 Web基础 基础问题回答 什么是表单? 表单是一个包含表单元素的区域,主要负责数据采集部分.表单元素允许用户在表单中输入信息.一个表单有三个基本组成部分:表单标签.表单域.表单按钮: 表单标签:包含处理表单数据所用的URL以及数据提交到服务器的方法: 表单域:包含了文本框.密码框.多行文本框.下拉选择框等等: 表单按钮:包括提交按钮.复位按钮和一般按钮. 浏览器可以解析运行什么语言? 支持HTML(超文本标记语言).XML(可扩展标记语言)以及Pyt