javascript模型,web模型

什么是javascript中w3c事件模型

事件模型就是事件流的传播方向，当文档中出现一些特定的交互瞬间时，就会有事件流的出现。比如：当我们点击页面上的某个元素的时候，页面中不同层次的元素会按照一定的顺序接收到这个事件。

W3C中的事件模型，包括事件捕获和事件冒泡。事件捕获，是指最外层的文档对象先捕获得到事件流，接着是其子元素，一直到最具体的元素。事件冒泡，是指最具体的元素先获得事件流，接着，向父级元素流向，直至最完成的文档对象！

相关问答

Q1: Javascript的事件流模型都有什么?

JavaScript中的事件流模型有冒泡事件流、捕获事件流和DOM事件流。其中dom同时支持两种事件模型，但捕获性事件先开始，从document开始也结束于document，dom模型的独特之处在于文本也可以触发事件

Q2: 如何使用JavaScript构建机器学习模型

如何使用JavaScript构建机器学习模型

目前，机器学习领域建模的主要语言是 Python 和 R，前不久腾讯推出的机器学习框架 Angel 则支持 Java 和 Scala。本文作者 Abhishek Soni 则用行动告诉我们，开发机器学习模型，JavaScript 也可以。

JavaScript？我不是应该使用 Python 吗？甚至 Scikit-learn 在 JavaScript 上都不工作。

这是可能的，实际上，连我自己都惊讶于开发者对此忽视的态度。就 Scikit-learn 而言，Javascript 的开发者事实上已经推出了适用的库，它会在本文中有所提及。那么，让我们看看 Javascript 在机器学习上能够做什么吧。

根据人工智能先驱 Arthur Samuel 的说法，机器学习为计算机提供了无需明确编程的学习能力。换句话说，它使得计算机能够自我学习并执行正确的指令，无需人类提供全部指导。

谷歌已经把自己移动优先的策略转换到人工智能优先很久了。

为什么 JavaScript 在机器学习界未被提及过？

慢（真的假的？）

矩阵操作很困难（这里有库，比如 math.js）

仅用于 Web 开发（然而这里还有 Node.js）

机器学习库通常是在 Python 上的（还好，JS 的开发者人数也不少）

在 JavaScript 中有一些可供使用的预制库，其中包含一些机器学习算法，如线性回归、SVM、朴素贝叶斯等等，以下是其中的一部分。

brain.js（神经网络）

Synaptic（神经网络）

Natural（自然语言处理）

ConvNetJS（卷积神经网络）

mljs（一组具有多种功能的子库）

首先，我们将使用 mljs 回归库来进行一些线性回归操作。

参考代码：

1. 安装库

$ npm install ml-regression csvtojson

$ yarn add ml-regression csvtojson

ml-regression 正如其名，负责机器学习的线性回归。

csvtojson 是一个用于 node.js 的快速 CSV 解析器，它允许加载 CSV 数据文件并将其转换为 JSON。

2. 初始化并加载数据

下载数据文件（.csv），并将其加入你的项目。

链接：

如果你已经初始化了一个空的 npm 项目，打开 index.js，输入以下代码。

const ml = require('ml-regression');

const csv = require('csvtojson');

const SLR = ml.SLR; // Simple Linear Regression

const csvFilePath = 'advertising.csv'; // Data

let csvData = [], // parsed Data

   X = [], // Input

   y = []; // Output

let regressionModel;

我把文件放在了项目的根目录下，如果你想放在其他地方，请记得更新 csvFilePath。

现在我们使用 csvtojson 的 fromFile 方法加载数据文件：

csv()

   .fromFile(csvFilePath)

   .on('json', (jsonObj) = {

       csvData.push(jsonObj);

   })

   .on('done', () = {

       dressData(); // To get data points from JSON Objects

       performRegression();

   });

3. 打包数据，准备执行

JSON 对象被存储在 csvData 中，我们还需要输入数据点数组和输出数据点。我们通过一个填充 X 和 Y 变量的 dressData 函数来运行数据。

function dressData() {

   /**

    * One row of the data object looks like:

    * {

    *   TV: "10",

    *   Radio: "100",

    *   Newspaper: "20",

    *   "Sales": "1000"

    * }

    *

    * Hence, while adding the data points,

    * we need to parse the String value as a Float.

    */

   csvData.forEach((row) = {

       X.push(f(row.Radio));

       y.push(f(row.Sales));

   });

}

function f(s) {

   return parseFloat(s);

}

4. 训练模型开始预测

数据已经打包完毕，是时候训练我们的模型了。

为此，我们需要写一个 performRegression 函数：

function performRegression() {

   regressionModel = new SLR(X, y); // Train the model on training data

   console.log(regressionModel.toString(3));

   predictOutput();

}

performRegression 函数有一个方法 toString，它为浮点输出获取一个名为 precision 的参数。predictOutput 函数能让你输入数值，然后将模型的输出传到控制台。它是这样的（注意，我使用的是 Node.js 的 readline 工具）：

function predictOutput() {

   rl.question('Enter input X for prediction (Press CTRL+C to exit) : ', (answer) = {

       console.log(`At X = ${answer}, y =  ${regressionModel.predict(parseFloat(answer))}`);

       predictOutput();

   });

}

以下是为了增加阅读用户的代码

const readline = require('readline'); // For user prompt to allow predictions

const rl = readline.createInterface({

   input: process.stdin,

   output: process.stdout

});

5. 大功告成！

遵循以上步骤，你的 index.js 应该是这样：

const ml = require('ml-regression');

const csv = require('csvtojson');

const SLR = ml.SLR; // Simple Linear Regression

const csvFilePath = 'advertising.csv'; // Data

let csvData = [], // parsed Data

   X = [], // Input

   y = []; // Output

let regressionModel;

const readline = require('readline'); // For user prompt to allow predictions

const rl = readline.createInterface({

   input: process.stdin,

   output: process.stdout

});

csv()

   .fromFile(csvFilePath)

   .on('json', (jsonObj) = {

       csvData.push(jsonObj);

   })

   .on('done', () = {

       dressData(); // To get data points from JSON Objects

       performRegression();

   });

function performRegression() {

   regressionModel = new SLR(X, y); // Train the model on training data

   console.log(regressionModel.toString(3));

   predictOutput();

}

function dressData() {

   /**

    * One row of the data object looks like:

    * {

    *   TV: "10",

    *   Radio: "100",

    *   Newspaper: "20",

    *   "Sales": "1000"

    * }

    *

    * Hence, while adding the data points,

    * we need to parse the String value as a Float.

    */

   csvData.forEach((row) = {

       X.push(f(row.Radio));

       y.push(f(row.Sales));

   });

}

function f(s) {

   return parseFloat(s);

}

function predictOutput() {

   rl.question('Enter input X for prediction (Press CTRL+C to exit) : ', (answer) = {

       console.log(`At X = ${answer}, y =  ${regressionModel.predict(parseFloat(answer))}`);

       predictOutput();

   });

}

到你的终端上运行 node index.js，得到的输出会是这样：

$ node index.js

f(x) = 0.202 * x + 9.31

Enter input X for prediction (Press CTRL+C to exit) : 151.5

At X = 151.5, y =  39.98974927911285

Enter input X for prediction (Press CTRL+C to exit) :

恭喜！你刚刚在 JavaScript 中训练了第一个线性回归模型。

Q3: 汇总js事件相关及事件处理模型

js事件是为了实现用户交互，比如当用户鼠标点击或者键盘输入时，浏览器会监听截获并且通知js做出反馈执行相应的函数，实现交互。

js的事件类型有很多，我们先来大概总结一下常用的JS事件

click点击事件、mousedown鼠标按下事件、mousemove鼠标移动事件、mouseup鼠标抬起事件

contextmenu右键出菜单事件、mouseenter/mouseover鼠标进入事件、mouserleave/mouseout鼠标离开事件

可通过事件对象的button属性来区分是左键\滚轮\右键，分别对应值 0 / 1 / 2

DOM3规定：click事件只能监听左键；只能通过mousedown和mouseup来判断鼠标键

keydown某键被按下时、keyup被松开时、keypress按下并且松开时

触发顺序：先 keydown，然后keypress，最后keyup

keydown和keypress的区别：

input：文本变化时触发

change：聚焦或失去焦点时判断状态是否改变，发生改变是触发change事件

focus：聚焦时触发

blur：失去焦点时触发

利用focus和blur可模拟placeholder

scroll：滚动条滚动时

load：页面加载完触发

abort：图像的加载失败

dblclick：双击事件

error：当加载图像和文档时发生错误

resize：窗口或者框架被重新调整大小

select：文本被选中时

reset：点击重置按钮时

submit：点击提交按钮时

接着看如何给DOM元素绑定事件处理函数

兼容性很好

但是根据js的特点，这种赋值的方式肯定会被后面的值覆盖。因此这种方式绑定事件处理函数规则是：同一个元素同一个事件只能绑定一个处理函数。等同于第一种写在行间。

IE8及以下不兼容

通过addEventListener绑定的方式，同个元素的同一个事件可以绑定多个处理函数，不会被覆盖。

attachEvent跟addEventListener 基本一致，也是同一个元素的同一个事件可以绑定多个处理函数，不会被覆盖。不同的是attachEvent可以绑定的函数是可以重复的，即即使绑定同一个函数都不会不覆盖。

以上几种事件绑定方式里面的this指向有点区别：

也比较好理解，IE独有的特殊一点指向window，其他都指向dom元素本身

封装一个兼容性的方法，用于绑定事件：

有的时候我们希望解除事件处理函数，那怎么办呢？

其实解除事件处理函数也对应有办法方法：

1. ele.onxxx = false / ' ' / null

2. ele.removeEventListener(type,fnName,false)

3. ele.attachEvent('on' + type,fnName)

值得注意的是：若干绑定的事件处理函数是匿名函数，则无法解除绑定！

不知道有没有发现，在上面绑定事件处理函数的时候，处理函数有个参数e或者叫event，其实是一个事件对象

事件对象就是处理函数里面的一个参数，说白了就是浏览器打包好的一个对象自动传入到处理函数的第一个参数中。

为了兼容IE一般这么写： e = e || window.event

事件对象会有个属性target，这个target叫事件源对象，记录可事件具体在谁身上触发的那个源头

同样IE上事件源对象是e.srcElement，谷歌两个都有

所以为了兼容IE一般获取事件源对象是这么来写：

当浏览器发展到第四代时(IE4及Netscape4)，浏览器开发团队遇到了一个很有意思的问题：页面的哪一部分会拥有某个特定的事件？想象画在一张纸上的一组同心圆。如果把手指放在圆心上，那么手指指向的不是一个圆，而是纸上的所有圆

两家公司的浏览器开发团队在看待浏览器事件方面还是一致的。如果单击了某个按钮，他们都认为单击事件不仅仅发生在按钮上，甚至也单击了整个页面

但有意思的是，IE和Netscape开发团队居然提出了差不多是完全相反的事件流的概念。IE的事件流是事件冒泡流，而Netscape的事件流是事件捕获流。事件冒泡和事件捕获称为两种事件处理模型

IE的事件流叫做事件冒泡(event bubbling)， 事件冒泡是结构上（非视觉上）嵌套的函数存在事件冒泡功能，即同一事件自子元素冒泡向父元素（自底向上）

[注意]所有现代浏览器都支持事件冒泡

但在具体实现在还是有一些差别。IE9、Firefox、Chrome、Safari将事件一直冒泡到window对象

而事件捕获的思想是不太具体的节点应该更早接收到事件，而最具体的节点应该最后接收到事件。事件捕获的用意在于在事件到达预定目标之前就捕获它

即事件捕获是指： 结构上（非视觉上）嵌套的元素存在事件捕获功能，即同一事件自父元素冒泡向子元素（自顶向下）

注意IE上没有事件捕获，Chrome和新版本的Firefox等都实现了

一个dom元素的一个事件类型绑定的一个处理函数只能存在一种事件模型，要么事件冒泡要么事件捕获。正常的通过addEventListener(type,fn,false)绑定事件时，最后一个参数默认是false表示的是，事件冒泡模型。如果改成true，立即变成事件捕获模型

如果一个dom元素的一个事件类型绑定了两个处理函数，两个函数的事件处理模型一个是事件冒泡一个是事件捕获，触发顺序是先捕获，后冒泡。

focus、blur、change、submit、reset、select等事件类型不冒泡

可以 利用事件冒泡和事件源对象可以叫事件委托给父元素

利用事件冒泡和事件源对象进行处理

优点：

性能好，不需要循环所有元素一个个绑定事件

灵活，当有其他新的子元素时，不需要重新绑定事件。

有的时候，我们不希望有冒泡功能，那我们怎么取消事件冒泡呢？

封装一个都好使的取消冒泡函数

有的时候我们需要阻止一些浏览器默认的事件

比如：表单提交、a链接跳转、右键菜单等

有几种方式：

参考资料：

DOM事件流的三个阶段

深入理解DOM事件机制系列第一篇——事件流

JS事件汇总

JS事件模型

事件1（上）

事件1（下）

DOM级别与DOM事件

DOM事件机制解惑

事件模型

JavaScript 事件委托详解

JavaScript 事件的学与记：stopPropagation 和 stopImmediatePropagation

event.target和event.currentTarget的区别

js怎么区分出点击的是鼠标左键还是右键？

Q4: JavaScript的事件模型是如何实现的？

具体实现方法如下：

实例1：

代码如下:

html

head

script type="text/javascript"

window.onload = function(){

document.getElementById('par').addEventListener('click',function() {alert('par');},true);

document.getElementById('son').addEventListener('click',function() {alert('son');},true);

}

/script

style type="text/css"

#par{width:300px;height:200px;background:gray;}

#son{width:200px;height:100px;background:green;}

/style

/head

body

div id="par"

div id="son"/div

/div

/body

/html

实例2：

代码如下:

html

head

script type="text/javascript"

window.onload = function(){

document.getElementById('par').addEventListener('click',function() {alert('par');});

document.getElementById('son').addEventListener('click',function() {alert('son');});

}

/script

style type="text/css"

#par{width:300px;height:200px;background:gray;}

#son{width:200px;height:100px;background:green;}

/style

/head

body

div id="par"

div id="son"/div

/div

/body

/html

addEventListener：第三个参数为可选参数，默认情况下为false，表示冒泡模型，即先触发最小的层(id为son的div)；而如果加上true参数，则说明是捕捉模型(从html--body---div)，按这样的层次来触发。

实例1的html代码有两个div，小的div包含在大的div内，点击小的div时，先是会触发alert('par')事件；然后触发alert('son')整件。实例2正好相反。

如果是采用"对象.onclick"属性的方式来触发事件，采用的是冒泡模型。

IE不支持addEventListener，而是使用attachEvent。但attachEvent不支持第三个参数，它没有捕捉模型。

Q5: javascript的事件模型有哪些

事件流：

事件冒泡：

主要是IE浏览器用于解决事件流的技术，就是重事件源的事件被触发

它就会想自己的父节点一层层的去触发事件。

事件捕获：

是Netscape用于解决事件流的技术，就是从父节点向子节点去触发事件。

DOM事件流：

是FireFox用于解决事件流的技术，既有事件冒泡和事件捕获

事件处理程序：

传统事件：

一个事件源只能绑定一个函数。它的兼容性比较强

如果绑定多个那么后面的函数就会将前面的函数覆盖掉

现代事件：

一个事件源可以绑定多个函数，函数是重后往前面执行的

兼容性比较差，有些浏览器不支持

鼠标事件：

onclick:鼠标单击时监听的事件

ondbclick: 鼠标双击时监听的事件

onmousedown: 鼠标按下时监听的事件

onmouseup: 鼠标弹起时监听的事件

onmousemove: 鼠标移动时监听的事件

onmouseout: 鼠标移出时监听的事件

onmouseover: 鼠标移进时监听的事件

键盘事件：

keydown:键盘按下一个键时的监听事件

keypress: 键盘按（按下并弹起）一个键时的监听事件

keyup: 键盘弹起一个键时的监听事件

HTML事件：

load:所有的东西全部被加载后触发的事件

abort:阻止安全装在

error:当页面发生错误时触发的一个事件

select:当文本框获得焦点时选中文本框中所有的数据

change:当下拉框中的数据发生改变时触发的事件

scroll:当页面中的滚动条发生滚动时 触发的事件

focus:让文本框获得焦点

blur: 让文本框失去焦点